use react-dom-stream for server-side rendering

One difficulty with ReactDOM.renderToString is that it is synchronous, and it can become a performance bottleneck in server-side rendering of React sites. This is especially true of pages with larger HTML payloads, because ReactDOM.renderToString's runtime tends to scale more or less linearly with the number of virtual DOM nodes.

react-dom-stream attempts to fix these three problems by rendering asynchronously to a stream

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[aickin]

Hey there, I’m the author of react-dom-stream, and I think it’d be great to see react-dom-stream integrated into react-starter-kit, at least as an option.

I attempted to put together a PR, and it mostly works, but I came across an ugly problem that I think makes react-starter-kit fundamentally incompatible with streaming.

Currently in react-starter-kit, the server rendering code first renders the dynamic HTML using renderToString, and it passes a function on the context called insertCss. Any component in the render tree can use this function to add CSS to an array of CSS strings that are to be added to the page. The output of renderToString is stored in a variable, and then it starts to output the page, with the CSS from the array placed in the head and the rendered HTML placed in the body.

When I converted this to streaming with react-dom-stream, the CSS disappeared, and that’s because the content in the page was now being rendered in order of appearance. Unfortunately, using insertCSS the way that react-starter-kit does means that the entire page content has to be rendered before you know what CSS to put in the head. Or, in other words: the entire body needs to be rendered before the head can be sent out. Streaming is not possible.

It’s worth noting that the page eventually looks OK, because the client-side render adds the missing CSS, but there is an ugly Flash Of Unstyled Content, which is clearly not OK.

I’ll think about other ways this could be done, but it seems to me that it would require rewriting the way styles are handled.

[ulani]

@goldensunliu thank you very much for crating this issue! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.