"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-paint||1020ms||670ms||SSR is 1.5x faster|
|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|
|prerender.cloud (this site)||plain-JS||SSR|
|first-meaningful-paint||3160ms||670ms||SSR is 4.7x faster|
|walmart.com coffee prod page||plain-JS||SSR|
|first-meaningful-paint||13210ms||3290ms||SSR 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.
WML_REDUX_INITIAL_STATEfor their Redux stores, so we left that in (so no remote calls would have to be made)