streaming-ssr

Streaming SSR reduces Time to First Byte and First Contentful Paint by delivering HTML incrementally. Using React 18 streaming APIs, the server sends HTML chunks as they generate, enabling faster initial paint for large page renders.

You can use renderToPipeableStream to enable streaming SSR by wiring the onShellReady event to start streaming responses as soon as the shell is ready. This requires a server capable of streaming responses and correct client hydration logic.

Streaming SSR works on both Node and edge runtimes. You can use renderToPipeableStream for Node or renderToReadableStream for edge environments, ensuring efficient memory usage and lower latency for dynamic pages.

Progressive hydration uses hydrateRoot to improve perceived performance on large pages by allowing the client to hydrate the server-rendered HTML incrementally. This prevents blocking the main thread and makes the page feel more responsive.

Implementing streaming server-rendered HTML requires React 18 because it introduces the necessary streaming APIs like renderToPipeableStream and hydrateRoot, which are essential for delivering HTML incrementally and wiring correct client hydration.

You should avoid streaming SSR if your server environment cannot support streaming responses or if your application lacks correct client hydration logic. Without these prerequisites, the streaming mechanism will fail to function correctly and break page rendering.