react-selective-hydration

What problem does it solve?

Server-rendered React pages often render a non-interactive shell until the full JavaScript bundle loads, delaying interactivity. Selective hydration enables hydrating only the critical interactive parts first while the rest of the page streams, improving perceived performance and time-to-interactive.

Core Features & Use Cases

• Enables streaming SSR with Suspense boundaries to hydrate critical components early.
• Utilizes renderToPipeableStream or renderToReadableStream and hydrateRoot to progressively hydrate UI as data becomes available.
• Applies to large pages where certain widgets must become interactive quickly while other sections render progressively for better user experience.

Quick Start

Start by integrating selective hydration in your React 18 SSR setup and ensure critical components are wrapped in Suspense boundaries.