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."
| create-react-app | plain-JS | SSR | |
|---|---|---|---|
| first-meaningful-paint | 1020ms | 670ms | SSR is 1.5x faster |
| first-interactive | 1020ms | 1080ms | tie |
| create-react-app 100,000 hello-world divs | plain-JS | SSR | |
| first-meaningful-paint | 7280ms | 1660ms | SSR is 4.3x faster |
| first-interactive | 9220ms | 19630ms | SSR is 2.2x slower |
| headless-render-api.com (this site) | plain-JS | SSR | |
| first-meaningful-paint | 3160ms | 670ms | SSR is 4.7x faster |
| first-interactive | 3160ms | 3240ms | tie |
| walmart.com coffee prod page | plain-JS | SSR | |
| first-meaningful-paint | 13210ms | 3290ms | SSR is 4x faster |
| first-interactive | 19410ms | 20150ms | tie |
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_STATEfor their Redux stores, so we left that in (so no remote calls would have to be made)
- but Walmart serialized state into