Selective Hydration & Streaming HTML
Use Suspense boundaries to stream HTML chunks and hydrate interactive islands first.
The Problem with Full-Page Hydration
Traditional SSR hydrates the entire page at once. If one part of the page has heavy JavaScript (like a map or chart), it blocks hydration of the rest — including simple interactive buttons.
Streaming HTML with renderToPipeableStream
React 18's streaming API sends HTML in chunks. The page shell arrives immediately; Suspense boundaries fill in content as it resolves — users see the UI before all data is ready.
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res);
},
onError(error) {
console.error(error);
},
});All lessons in this course
- How React SSR Works Under the Hood
- Hydration Errors: Causes & Fixes
- Selective Hydration & Streaming HTML
- Islands Architecture Pattern