react-selective-hydration

React selective hydration improves time-to-interactivity by hydrating interactive components before the entire streaming page loads. It uses Suspense boundaries to prioritize interactive UI, allowing users to engage with components as streams arrive rather than waiting for full page load.

To implement selective hydration, wrap interactive UI components in Suspense boundaries and render them using renderToPipeableStream or renderToReadableStream. Then use hydrateRoot on the client to hydrate interactive components promptly as the streams arrive.

Yes, selective hydration works in both Node and Edge environments. It applies to streaming SSR workflows using renderToPipeableStream for Node or renderToReadableStream for Edge, requiring React 18+, Suspense boundaries, and hydrateRoot for implementation.

The best way to hydrate interactive components early is using selective hydration with Suspense. This technique renders interactive parts immediately while streaming the remaining page content, leveraging renderToPipeableStream or renderToReadableStream for efficient delivery.

You need Suspense boundaries for streaming server-side rendering because they enable selective hydration. By wrapping interactive UI in Suspense, React can hydrate those components early as streams arrive, preventing the entire page from blocking on slow-loading content.