react-selective-hydration

Selective hydration in React 18 enables hydrating critical interactive components first while non-critical page sections render progressively, reducing time-to-interactive and allowing user interactions before the full JavaScript bundle loads.

To hydrate components early, wrap critical interactive components in Suspense boundaries and use renderToPipeableStream or renderToReadableStream for the server render, then pair it with hydrateRoot on the client to progressively hydrate the UI as data becomes available.

No, selective hydration requires React 18 or higher because it relies on concurrent rendering features, Suspense boundaries for streaming SSR, and the hydrateRoot API to prioritize and hydrate critical components before the full page loads.

The best way to prioritize interactive widgets during server-side rendering is wrapping them in Suspense boundaries to enable selective hydration, which ensures critical components hydrate first while the rest of the page streams progressively.

You should avoid streaming SSR with selective hydration for small pages where the full JavaScript bundle loads instantly, as the overhead of Suspense boundaries and hydrateRoot provides no perceived performance benefit when there are no non-critical sections rendering progressively.