react-selective-hydration

Prevent slow components from blocking React SSR hydration by wrapping them in Suspense boundaries. This enables selective hydration, allowing ready components to hydrate independently rather than waiting for the entire page to load.

Selective hydration works with React 18 streaming SSR by using renderToPipeableStream or renderToReadableStream to send ready HTML chunks progressively. hydrateRoot then attaches interactivity to each Suspense-delimited region as it arrives.

Yes, you need React 18 hydrateRoot to enable progressive hydration. It progressively activates interactive UI regions as their HTML and JavaScript become available, which is required for the selective hydration process to function.

The best way to hydrate interactive React UI early is by combining streaming SSR APIs with Suspense boundaries. This approach lets independently ready UI chunks hydrate as soon as their data is available, bypassing slow components.

You should not use selective hydration when your React application lacks independently hydratable UI regions or slow data-fetching components. Without distinct Suspense boundaries, streaming SSR provides no hydration bottleneck reduction.