Hydration

ELI5 — The Vibe Check

Hydration is when a server-rendered HTML page comes alive in the browser. The server sends a static HTML snapshot — fast to load, good for SEO — then JavaScript downloads and 'hydrates' it by attaching event listeners and making it interactive. Like pouring water on a dehydrated app.

Real Talk

Hydration is the process of attaching JavaScript event handlers and reactive state to server-rendered HTML markup. After SSR sends static HTML to the client, the JS framework runs in the browser, traverses the existing DOM, and makes it interactive without rebuilding the entire tree from scratch.

Show Me The Code

// Nuxt / Next.js do this automatically
// Server: renders <button>0</button> as HTML
// Client: hydrates it so the click handler works
// If DOM mismatches between server and client → hydration mismatch error

When You'll Hear This

"You're getting a hydration mismatch because the server and client render different content." / "Partial hydration lets you hydrate only the interactive islands."