Skip to main content
Interface Atlas
Guide

Hydration

The CPU-intensive process of attaching JavaScript event listeners to server-rendered HTML so the page becomes interactive.

Published

Contents

Definition

The CPU-intensive process of attaching JavaScript event listeners to server-rendered HTML so the page becomes interactive.

Hydration is the bridge between Server-Side Rendering (SSR) and Client-Side Rendering (CSR). The server sends a static HTML shell so the user sees the page immediately, and then the browser downloads and executes a JavaScript bundle to “hydrate” that shell, making buttons clickable and forms submittable.

Why It Matters

Hydration is a tax. While the browser is hydrating the DOM, the main thread is blocked. On a high-end laptop, this happens in milliseconds. On a budget mobile device on a slow network, the page will appear fully loaded, but if the user taps a button, the page will appear frozen until hydration completes.

Hydration vs. Resumability

  • Hydration: The browser must download the framework, reconstruct the entire component tree in memory, and re-execute the component functions to figure out where to attach event listeners.
  • Resumability: The server serializes the exact state of the application into the HTML itself. The browser does not need to re-execute any component code; it simply “resumes” execution exactly where the server left off.