Frontend engineering · Rendering

Hydration

Also called: Hydrate, Client hydration, Attaching to SSR HTML

The server sends HTML first; the browser then attaches framework state and events to that DOM so the page goes from viewable to interactive.

In detail

SSR/SSG pages ship HTML for a fast, SEO-friendly first paint, but buttons don't have framework handlers yet. Hydration walks the component tree against the existing DOM and wires up state and listeners.

A common failure is a hydration mismatch: server HTML disagrees with the client's first render (for example Date.now(), random IDs, or browser-only APIs used too early). You get warnings, rerenders, or broken interaction.

Versus Client-Side Rendering, CSR skips this attach step but often has a slower first paint. In Next.js-style apps, keep browser-only logic in useEffect or client components.

Developer infoTerm ID, DOM cues, match priority

Term ID: eng-hydration
DOM selectors: No DOM cues. This concept isn't detected directly on a page.
Priority: 1 · when several match at the same level, the higher priority wins
Version: v1 · updated Oct 5, 2026