What Is Hydration?
Client-Side Hydration
Hydration is the process where JavaScript attaches event handlers and interactivity to server-rendered HTML. The server sends static markup, then the client-side framework 'hydrates' it to become a fully interactive application.
How Hydration Works
When Next.js renders a page on the server, the browser receives complete HTML that displays immediately. Then React runs on the client, matches the existing DOM, and attaches click handlers, state management, and other interactivity. This transition is hydration.
Key Concepts
- Partial Hydration — Only hydrating interactive components while leaving static content as plain HTML — used by Astro
- Hydration Mismatch — When server-rendered HTML differs from what the client expects — causes React warnings and visual glitches
Frequently Asked Questions
Why is hydration important for performance?
Hydration lets users see content instantly (from server-rendered HTML) while JavaScript loads and enables interactivity. Without hydration, users would stare at a blank page until all JS downloads and executes.