What is Hydration?

Hydration is the process in which JavaScript attaches interactivity to HTML that was already rendered on the server. The browser receives a complete page with text, images, and layout in place, and the framework then takes over the markup, wires up event listeners, and turns the static page into a fully interactive application.

Definition

In an SSR or SSG workflow, the server outputs HTML and the client downloads a JavaScript bundle that knows how to manage that HTML going forward. During hydration, the framework reconciles its component tree with the existing DOM. Once hydration completes, the page behaves like a single-page application: state changes, route transitions, and component updates are handled in the browser.

Why it matters

Hydration is the bridge between fast first paint and full interactivity. Done well, users see content immediately and can interact with it within a moment. Done poorly, hydration delays interactivity, ships oversized bundles, and produces janky behavior where the page appears ready but does not yet respond to input.

Modern variants

Recent frameworks introduce partial hydration, progressive hydration, and islands architecture, where only interactive parts of the page receive JavaScript. Resumability and server components push the line further, deferring or even eliminating hydration for content that does not need it. For commerce storefronts, these techniques reduce time to interactive and lift Core Web Vitals without sacrificing rich experiences.

Related

Explore Composable Headless Frontend · Performance and Core Web Vitals.