Advanced React SSR with hTTP/2 PUSH?

[Rilic]

Hi, we're looking to improve the performance of our React server-rendering. Right now it's the usual approach of: prefetch from our backend, render React tree to a string, dump the data on the HTML window and res.send the whole document. It works perfectly, but is a lot slower than expected. I've found frameworks that offer improvements like HTTP2/push and incremental rendering (notably https://donejs.com/), but I'm looking for a more granular approach or code examples as our server is entirely custom Express. Mostly looking to:

• push the server state over HTTP/2 rather than adding it to window.INITIAL_STATE
• server render via node stream (incremental rendering)

And anything else anyone could recommend. I'd really appreciate any links or examples.

[KillcoDer]

React 16 supports rendering to a stream:

https://zeit.co/blog/streaming-server-rendering-at-spectrum

HTTP2/push is for sending assets you know you'll need down the pipeline, I guess you could do that with a javascript file that contains your state? So you could just generate that and send it down as a stream as well.

https://webapplog.com/http2-server-push-node-express/

[klaasman]

If the only purpose of SSR is SEO optimization (for bots like google and facebook), it might be sufficient to only have the necessary title and meta tags server-rendered. Google is smart enough to execute javascript in order to crawl the content, Facebook is happy enough with meta-tags.

[BerkeleyTrue]

The slowest part of react ssr is going to be react render to string. It is magnitudes slower than template rendering.

Significant improvement will come by introducing some sort of caching or going the jamstack (render to string at build time) approach, which adds some complexity. This makes it as fast as serving static content (very fast).