progressive-hydration

Defer hydration of non-critical React components using Suspense boundaries and dynamic imports.

Updated Apr 28, 2026

Search Tags:#react #nextjs #ssr #hydration #web-performance #code-splitting #progressive-hydration

Ready to run

npx skills add https://github.com/PMKhai/claude-config --skill progressive-hydration-pmkhai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: progressive-hydration
Source: https://github.com/PMKhai/claude-config/tree/main/skills/progressive-hydration
Command: npx skills add https://github.com/PMKhai/claude-config --skill progressive-hydration-pmkhai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Server-rendered pages load quickly but remain non-interactive until the JavaScript hydrates the UI. Progressive hydration defers hydration of non-critical sections to improve Time to Interactive without sacrificing overall UX.

Core Features & Use Cases

Code-splitting and selective hydration using React.lazy and Suspense to hydrate critical parts first
Framework guidance for Next.js dynamic imports and client-only widgets to optimize performance
Real-world scenario: accelerate initial paint on pages with non-critical sections while keeping full interactivity available on demand

Quick Start

Wrap non-critical components in Suspense boundaries and use dynamic imports to defer hydration until needed.

Frequently Asked Questions about progressive-hydration

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

FAQPage Schema

How do I defer hydration for non-critical UI sections in a React SSR app?▼

To defer hydration in a React SSR app, wrap non-critical UI sections in Suspense boundaries and use dynamic imports. This progressively hydrates components, delaying non-critical JavaScript execution until needed to improve Time to Interactive.

What is progressive hydration and how does it improve web performance?▼

Progressive hydration is a technique that balances fast server-rendered pages with interactive client behavior by selectively hydrating critical components first. It defers non-critical JavaScript to improve Time to Interactive without sacrificing overall user experience.

Can I use Next.js dynamic imports for selective hydration of client-only widgets?▼

Next.js dynamic imports support selective hydration for client-only widgets. By leveraging React.lazy and Suspense boundaries, you can code-split and defer hydration of non-critical sections until they are required for interaction.

What's the best way to code-split and hydrate critical React components first?▼

Code-splitting and selective hydration are best achieved by wrapping non-critical components in Suspense boundaries. This allows the application to hydrate critical parts first, accelerating initial paint while keeping full interactivity available on demand.

When should I not use progressive hydration in my SSR application?▼

Progressive hydration should not be used for critical, above-the-fold UI sections that require immediate interactivity. It is specifically designed for non-critical UI sections that can defer hydration, so applying it to essential components delays user interaction.

Why does my server-rendered page load fast but remain non-interactive?▼

Server-rendered pages remain non-interactive because the JavaScript must hydrate the UI before user actions register. Progressive hydration solves this by selectively hydrating critical components first and deferring non-critical JavaScript execution.