The process where client-side JavaScript attaches to server-rendered HTML to make it interactive.
Hydration is a core concept in modern web frameworks like Next.js, Remix, and Astro. When a server renders a page, it sends static HTML to the browser for fast initial display. Hydration is the process where the framework's client-side JavaScript 'wakes up' this static HTML by attaching event listeners, restoring state, and making components interactive. Partial Hydration (used in Astro and React Server Components) optimizes this by only hydrating interactive components, leaving static content as plain HTML. This reduces JavaScript bundle size and improves Time to Interactive (TTI).
The server generates complete HTML for the page, including all content and initial state.
The static HTML is sent to the browser, which displays it immediately (fast First Contentful Paint).
The browser downloads and parses the JavaScript bundles needed for interactivity.
React (or another framework) walks the DOM, attaches event listeners, and restores component state.
Single-page applications that serve crawlable HTML to search engines while remaining fully interactive for users.
Using partial hydration to reduce JavaScript payloads and improve Core Web Vitals scores.
Pages that work as static HTML even before JavaScript loads, then progressively enhance with interactivity.
Knowing the definition is step one. Building it into your product is step two. That's where we come in.