Overview
This page is the atomic definition. The SSR patterns live at nextjs and astro.
Definition
Hydration is the client-side process that attaches JavaScript event listeners and reactive state to HTML that was pre-rendered on the server. The browser receives a fully-formed HTML document and paints it immediately (good for First Contentful Paint), then the JavaScript bundle loads, React recreates the virtual DOM from the same component tree, and reconciles it with the server HTML. If the two match, React reuses the existing DOM nodes and attaches event handlers without re-painting. A mismatch triggers a hydration error and a forced re-render. Partial hydration (Astro’s islands, React Server Components) limits hydration to interactive components, reducing JavaScript parse time. Resumability (Qwik’s model) serializes event state into HTML so hydration is deferred until the first interaction.
When it applies
Hydration applies whenever you use server-side rendering (SSR) or static site generation (SSG) with a JavaScript framework. Pages that are purely static with no interactivity do not need hydration and should ship no JavaScript.
Example
A Next.js page with getServerSideProps renders HTML on the server. The browser paints it in ~200 ms. Then _app.js loads (~300 ms), React hydrates the page, and the “Add to cart” button becomes clickable.
Related concepts
- react - hydration is part of React’s rendering lifecycle.
- nextjs - Next.js manages hydration for SSR and SSG pages.
- astro - Astro’s islands architecture minimizes hydration surface.
- virtual-dom - the in-memory tree that hydration reconciles against the real DOM.
- server-component - React Server Components never hydrate; they render once on the server.
Citing this term
See Hydration (llmbestpractices.com/glossary/hydration).