react-selective-hydration

Selective hydration with streaming SSR uses React 18's Suspense boundaries and hydrateRoot to hydrate fast UI chunks independently. This allows interactive parts of the page to hydrate as soon as they arrive, without waiting for the entire app bundle or slow components to finish loading.

The best way to isolate slow data-fetching components during React SSR is wrapping them in Suspense boundaries. This allows sibling UI to stream and hydrate independently via renderToPipeableStream or renderToReadableStream, preventing slow components from blocking the rest of the page.

Yes, selective hydration works with renderToPipeableStream in Node and renderToReadableStream on the edge. Both React 18 streaming APIs enable sending HTML earlier and hydrating streamed interactive chunks independently via hydrateRoot without waiting for the full tree.

Whole-page hydration blocks user interaction because users must wait for large bundles and slow components to finish loading before the UI becomes interactive. Selective hydration solves this by enabling interactive parts of the page to hydrate as soon as they arrive from the streaming SSR response.

To set up React 18 streaming SSR for a dashboard, switch your SSR rendering to renderToPipeableStream or renderToReadableStream. Wrap slow, data-fetching sections like Comments in Suspense boundaries so the rest of the page hydrates immediately via hydrateRoot.

You need Suspense boundaries for selective hydration when your SSR page contains mixed fast and slow components relying on Suspense-compatible data fetching. This isolates heavy data-fetching sections so sibling UI can stream and hydrate independently without waiting for all JavaScript to load.