progressive-hydration

You can defer React hydration by using Suspense fallback boundaries with React.lazy code-splitting to delay JavaScript loading and event attachment for below-the-fold components until they enter the viewport.

This happens when the full hydration tree rebuilds at once, creating a gap between visual rendering and interactivity. Progressive hydration fixes this by prioritizing critical UI chunks so the most important components become interactive first.

Set up progressive hydration by wrapping non-critical UI sections in Suspense boundaries, using React.lazy for code-splitting, and applying selective or priority-based hydration so chunks activate on demand without blocking already-hydrated sections.

Yes, React.lazy and Suspense enable controlled hydration boundaries that prevent full tree rehydration. This approach hydrates isolated component chunks sequentially, avoiding common SSR rehydration pitfalls while keeping already-active sections interactive.

Progressive hydration is designed for partial interactivity scenarios like viewport-triggered UI and rarely-used widgets. It defers their JavaScript execution and event binding until user interaction or visibility requires activation.

Avoid progressive hydration when entire pages require immediate full interactivity. If all above-the-fold and below-the-fold components need instant event attachment, deferring JavaScript loading will degrade user experience rather than improve time to interactive.