What hydration means
Hydration is the process where client JavaScript attaches event listeners and state to HTML that the server already rendered. The markup is visible immediately, but it only responds to clicks once hydration runs over it.
- The server sends rendered HTML the browser paints right away.
- The bundle then walks the same tree and wires up interactivity.
- Between paint and hydration the page looks ready but is not yet responsive.
Partial hydration
Full hydration re hydrates the entire tree, including static parts that will never change. Partial hydration instead hydrates only components that actually need interactivity and leaves the rest as plain HTML.
- Static text, headings, and images skip hydration entirely.
- Only interactive components pay the cost of client JavaScript.
- Less code runs, so the page becomes responsive sooner.
The risk to avoid is a hydration mismatch, where server and client render different markup; that forces a costly re render and can break the page. Keeping rendered output identical on both sides is essential.
Key idea
Hydration wires client interactivity onto server rendered HTML, and partial hydration limits that work to components that truly need it, cutting JavaScript while you avoid mismatches between server and client output.