Hydration: Making Server HTML Interactive
Hydration is the step where JavaScript attaches event handlers to HTML that was already rendered, turning a fast static page into a fully interactive one.
Hydration is attaching interactivity to HTML already rendered by the server.
What It Is
Hydration is the process of taking HTML that the server already rendered and attaching the JavaScript that makes it interactive.
The page appears instantly, then comes alive as hydration finishes.
It is how SSR keeps both speed and interactivity.
Why It Matters
- Content is visible before any script runs.
- Interactivity arrives without a full reload.
- It avoids the blank-page problem of pure client rendering.
- It makes modern apps crawlable and fast.
- Done poorly, it delays interaction and hurts the experience.
How to Do It
- Keep the server HTML faithful to the client state.
- Load only the scripts the page needs.
- Start hydration as soon as the HTML is ready.
- Avoid hydration mismatches between server and client.
- Measure the time until the page is interactive.
- Stream and split scripts where possible.
What to Avoid
- Rendering one thing on the server and another in the browser.
- Hydrating everything when only a few parts need it.
- Heavy scripts that delay interactivity.
- Ignoring the gap where buttons do nothing.
- Blocking hydration on slow network calls.
Common Mistakes
- Server and client text that differ by a space.
- Whole-page hydration for a single widget.
- Measuring first paint but not first interaction.
- No fallback when hydration fails.
- Making hydration the bottleneck after speed improved.
Before: an SSR page shows instantly but buttons lag.
After: the team hydrates only what needs to respond.
The result: the page stays fast and interactive everywhere it matters.
The lesson: hydration should be as small and faithful as possible.
Quick Tip
Hydration is where fast meets interactive; keep the scripts small and the server and client in perfect agreement.
Frequently Asked Questions
Hydration, in Short
Hydration gives served HTML a pulse.
Show the content first, then attach the behavior.
Keep the two versions identical and the scripts lean.