Kelly Mears

Hydration

Attaching client-side behavior to server-rendered markup without rebuilding it.

Web Platform2 min read225 words13 out · 15 in
also calledHydrating

Hydration is the process by which a client framework takes over already-rendered HTML: it walks the existing Document Object Model, attaches event handlers, and initializes its internal state so subsequent updates work — without discarding and re-creating the markup.

Its defining constraint is that the client's first render must match what the server produced. Where they differ you get a hydration mismatch, which frameworks report as an error and resolve by discarding the server's work. The usual causes are all forms of the same thing: the two environments disagreed about something. Current time. A random value. A user preference read from the browser. Anything derived from window.

Hydration is also the main cost of Server-Side Rendering as usually practiced: the framework and every interactive component must be downloaded and executed before the page responds to input, so a page that looked ready is not. That gap is what Islands Architecture, React Server Components, and partial hydration all exist to shrink.

A subtler hazard: content rendered by the server and then mutated directly by the browser — by a text editor, an embedded map, a third-party widget — is invisible to the framework's model. A subsequent re-render diffs against a stale picture and duplicates or destroys elements. Keying the wrapper on a value that changes with the data, forcing a clean remount, is the usual escape.

See also9

Client-Server Boundary

The line in an application where execution moves from the server to the browser.

Web Platform11 connections

contenteditable

The HTML attribute that makes an element directly editable, and the surface behind most rich-text editors.

Web Platform12 connections

Critical Rendering Path

The sequence of steps between receiving HTML and painting pixels, and everything that blocks it.

Web Platform18 connections

Progressive Enhancement

Building so the core experience works without scripts, with richer behavior layered on top.

Web Platform26 connections

Lazy Loading

Deferring the fetch of a resource until it is needed, or until the browser is idle.

Web Platform21 connections

Performance Budget

A committed numeric ceiling on a page's cost, enforced automatically.

Web Platform26 connections

HTML

The markup language every web page is written in, invented at CERN around 1990 as a simple way to tag documents and link them, and grown by thirty years of browser competition into an application platform.

Web Platform12 connections

CSS-in-JS

Writing a component's styles in JavaScript alongside its markup and logic, so styles are scoped automatically and can depend on the component's state, an approach popular in the React era whose runtime costs led to build-time variants.

Web Platform16 connections

Layout Shift

Visible content jumping position after it first appears, usually because something loaded late without reserved space, measured by browsers as Cumulative Layout Shift.

Web Platform12 connections

Linked from15