react-selective-hydration

Selective hydration prevents React SSR pages from staying non-interactive by starting hydration for prioritized UI while streaming the rest of the page progressively. It uses hydrateRoot and Suspense boundaries so components become usable without waiting for slower sections.

The best way to hydrate components before slow data fetching finishes is wrapping heavy data-fetching components inside Suspense boundaries. This prevents them from delaying sibling hydration, allowing other interactive widgets to render and hydrate early using streaming SSR APIs.

Yes, selective hydration works with renderToPipeableStream in Node and renderToReadableStream on the edge. These React 18 streaming SSR APIs start sending markup as soon as parts of the UI are ready, which then hydrate selectively using hydrateRoot.

To set up streaming SSR with selective hydration, wrap slow data-fetching components in Suspense boundaries and stream the rest of the page using renderToPipeableStream or renderToReadableStream. Then hydrate the application using hydrateRoot.

Yes, you need React 18 and hydrateRoot to use selective hydration. It requires React 18+ apps, streaming SSR APIs, and Suspense boundaries to ensure interactive components become usable early without blocking hydration on slow data fetches.