progressive-hydration

Hydrate non-critical SSR sections later by wrapping them in Suspense boundaries with fallbacks and deferring their client code via lazy loading or Next.js dynamic imports, which prevents blocking the whole app and improves perceived performance.

Your SSR page suffers from slow Time to Interactive because all client JavaScript attaches at once, creating an uncanny valley where interactivity is blocked; progressive hydration solves this by deferring nonessential JS until needed.

Wrap below-the-fold components in Suspense boundaries with fallbacks and use lazy loading or Next.js dynamic imports to code-split their client code, deferring hydration until viewport visibility or interaction priority triggers the load.

Yes, Suspense boundaries are required to implement progressive hydration in Next.js, as they allow you to wrap non-critical components with fallbacks and defer their client code loading via dynamic imports until needed.

Avoid progressive hydration for above-the-fold sections requiring immediate interactivity, as this technique intentionally delays JavaScript execution for non-critical UI regions to improve overall perceived performance and Time to Interactive.