Hydration
Hydration attaches events and state to existing HTML. Done well it preserves fast first paint and interactivity; done poorly it causes mismatches.
Definition
Hydration is the process where a client-side framework takes over server-rendered or pre-rendered HTML and attaches event handlers, state, and interactivity. It bridges SSR/SSG/prerender output with SPA behavior.
Why it matters
- Determines whether “content first, interactivity later” feels smooth
- Mismatches can cause re-renders and layout shifts, hurting UX and CWV
- Lets you keep SPA interactivity without sacrificing indexable HTML
How to implement
- Keep initial SSR/SSG state consistent with the client render
- Avoid reading window/document during render when SSR is involved
- Move client-only behavior into effects or conditional rendering
Related
Tutorials
Tools
FAQ
Common questions about this term.