« Back to blog

When Not to Server-Side Render

We tested four React apps with the Chrome Lighthouse tool (on a laptop).

"First meaningful paint" means "when the primary content of a page is visible"

"First interactive" means "when necessary scripts of the page have loaded and the CPU is idle enough to handle most user input."

    first-meaningful-paint1020ms670msSSR is 1.5x faster
create-react-app 100,000 hello-world divsplain-JSSSR
    first-meaningful-paint7280ms1660msSSR is 4.3x faster
    first-interactive9220ms19630msSSR is 2.2x slower
headless-render-api.com (this site)plain-JSSSR
    first-meaningful-paint3160ms670msSSR is 4.7x faster
walmart.com coffee prod pageplain-JSSSR
    first-meaningful-paint13210ms3290msSSR is 4x faster

The smaller apps suffer worse first-interactive and only yield a small gain for first-meaningful-paint. The larger the app, the better gains you get for first-meaningful-paint (that part isn't surprising).

Walmart is interesting because it's a large "real world" application of server-side rendering, but they also aren't an ideal comparison because they're using a custom solution.

Server-side rendering is still a requirement for slackbot, twitterbot, facebook, etc. (meta tag and open graph parsing for link previews) and it's also still very beneficial to apps making async requests whose initial rendering might take longer than googlebot is willing to wait - but as far as performance on a powerful desktop/laptop, SSR is has dubious peformance gains.

Testing notes

  • 2.5GHz Core-i7 MacBook Pro
  • Chrome Canary Version 61.0.3131.0 audit tab in the developer tools
    • ran each test 3 times
  • Walmart appears to be on React v14
  • create-react-app and headless-render-api.com are using React v15
  • only Walmart had any state
    • but Walmart serialized state into WML_REDUX_INITIAL_STATE for their Redux stores, so we left that in (so no remote calls would have to be made)