Stream rendering to reduce TTFB and CPU load

I suggest to stream-render pages > 50KB (hypothetical stream overhead) to reduce TTFB and CPU load.

• Inferno offers streamAsString, streamAsStaticMarkup, streamQueueAsString, streamQueueAsStaticMarkup with inferno-server (master). As of 1.2.1, the stream renderer was experimental and 10-15% slower than renderToString. Should wait for 1.3 (currently RC3).
• React with aickin/react-dom-stream, which replaces renderToString and renderToStaticMarkup.
• thysultan/dio.js with renderToStream (SSR/renderToStream.js).

It would supersede #767. Preact does not support streaming (preactjs/preact#23 (comment)).

[arunoda]

One thing to mention..

Stream rendering usually won't add much CPU improvements since the amount of work to be done is the same. But it'll reduce the response time.

It's a pretty good idea to provide a way to customize the SSR rendering system. But I think for now, we'll stick with the React's renderToString() methods by default.

This is something we could do after 2.0.

Stream rendering usually won't add much CPU improvements since the amount of work to be done is the same.

from aickin/react-dom-stream

One call to ReactDOM.renderToString can dominate the CPU and starve out other requests. This is particularly troublesome on servers that serve a mix of small and large pages.

Wouldn't streaming sensibly reduce memory allocation and CPU usage for large pages by being both asynchronous and partial?

[kojuka]

Thought this was along the same lines. Has anyone tried https://github.com/FormidableLabs/rapscallion ?

It provides a streaming interface so that you can start sending content to the client immediately.

Other features from the docs:

• Rendering is asynchronous and non-blocking.
• Rapscallion is roughly 50% faster than renderToString.
• It provides a streaming interface so that you can start sending content to the client immediately.
• It provides a templating feature, so that you can wrap your component's HTML in boilerplate without giving up benefits of streaming.
• It provides a component caching API to further speed-up your rendering.

[gcpantazis]

Added an example of Rapscallion in #2279... can confirm that Rapscallion + Next is insane. Streamed/promise-based render is awesome, but Component-level caching is a game-changer for us...

[buzinas]

Now that React 16 has its own renderToNodeStream, it would be a huge advantage for next.js to add an option to use it instead of renderToString. What do you think, @timneutkens?

[timneutkens]

It's on our list of things to add already 👍

[MicroBenz]

Any news about this?