Streaming Server-Side Rendering

We can reduce the Time To Interactive while still server rendering our application by streaming the contents of our application. Instead of generating one large HTML string containing the necessary markup for the current navigation, we can send the shell first and stream slower parts later. The moment the client receives the first chunks of HTML, it can start parsing and painting the page.

Modern React streaming uses renderToPipeableStream() on Node runtimes or renderToReadableStream() on Web Stream runtimes, then hydrates the response with hydrateRoot() on the client.

When to Use

• Use this when you want to improve TTFB and FCP by sending HTML incrementally as it's generated
• This is helpful for large pages where waiting for the full HTML would delay the initial paint

When NOT to Use

• When your hosting environment doesn't support streaming responses (some serverless platforms buffer the full response)
• For simple static pages where the HTML is small enough that streaming provides no meaningful improvement
• When middleware or reverse proxies in your stack buffer the response, negating the streaming benefit

Instructions