progressive-hydration

Defer client JavaScript for non-critical UI using Suspense and lazy loading.

1|Updated Jul 12, 2025

Search Tags:#suspense #react #performance optimization #nextjs #code splitting #ssr #hydration

Ready to run

npx skills add https://github.com/ubay1/next15-starter --skill progressive-hydration-ubay1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: progressive-hydration
Source: https://github.com/ubay1/next15-starter/tree/main/.agents/skills/progressive-hydration
Command: npx skills add https://github.com/ubay1/next15-starter --skill progressive-hydration-ubay1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Progressive hydration reduces the Time to Interactive problem of server-rendered pages by delaying JavaScript execution for non-critical UI until it’s needed.

Core Features & Use Cases

Hydrates non-critical sections later: Prioritizes user-interacted areas so parts of the page can render quickly without becoming immediately interactive.
Uses chunking and deferred loading: Employs Suspense boundaries, lazy loading, and code-splitting to load only the JavaScript required for specific UI regions.
Improves perceived performance: Addresses the “uncanny valley” by making interactivity available in a controlled, staged manner rather than blocking the whole app.

Quick Start

Use progressive hydration by wrapping non-critical components in Suspense with fallbacks and deferring their client code via lazy loading or Next.js dynamic imports when they don’t need immediate interactivity.

Frequently Asked Questions about progressive-hydration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is progressive hydration in SSR React applications?▼

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.

Why does my server-rendered page have a slow Time to Interactive?▼

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.

How do I defer JavaScript execution for below-the-fold React components?▼

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.

Do I need Suspense boundaries to implement progressive hydration in Next.js?▼

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.

When should I avoid progressive hydration for my React application?▼

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.