react-selective-hydration

Selective hydration prevents slow data-fetching components from blocking hydration of the rest of a React 18 server-rendered page. It reduces time-to-interactivity by allowing interactive parts to hydrate as soon as their markup and JavaScript are available.

To implement streaming SSR with Suspense in React, wrap slow components in Suspense boundaries, stream HTML progressively using renderToPipeableStream or renderToReadableStream, and hydrate the client with hydrateRoot to enable selective hydration.

Prerequisites for selective hydration include a React 18 SSR application utilizing Suspense boundaries to delimit UI chunks, streaming APIs like renderToPipeableStream, and hydrateRoot for client hydration.

Yes, you can hydrate a React component before the entire page markup is ready by using streaming SSR. This delivers HTML progressively, enabling immediate hydration and interactivity for available components while others wait for data.

You should avoid selective hydration when your SSR React app lacks Suspense boundaries or streaming APIs. If your app does not use renderToPipeableStream or hydrateRoot, this selective hydration optimization cannot be applied.