Glossary · Web Development

Hydration

Hydration is the step where client-side JavaScript attaches event handlers and state to HTML that the server already rendered, making the page interactive.

Updated October 6, 2026

Hydration is the process by which a JavaScript framework takes server-rendered HTML in the browser and attaches interactivity to it, rebuilding its internal component state and connecting event listeners without recreating the DOM from scratch.

Why it matters

Server rendering gives fast visible content, but the page is not usable until hydration finishes. During that gap buttons may look ready and do nothing. Hydrating large pages is CPU-intensive, especially on low-end phones, and mismatches between server and client output produce warnings or visual glitches.

Example

Timeline for a server-rendered page:

  1. 0.5 s: HTML arrives and the content is visible.
  2. 1.2 s: the JavaScript bundle finishes downloading.
  3. 1.8 s: hydration completes and clicks work.

The values are illustrative, but the gap between steps 1 and 3 is where users tap and nothing happens.

Common mistakes

  • Rendering different content on server and client, such as the current time.
  • Hydrating the whole page when only small parts are interactive.
  • Measuring only first paint and ignoring when the page becomes interactive.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · Web DevelopmentCritical CSSCritical CSS is the minimal set of styles needed to render the visible part of a page, inlined in the HTML so content appears without waiting for stylesheets.Glossary · Web DevelopmentCSS AnimationCSS animation uses @keyframes and the animation properties to change styles over time without JavaScript, from simple fades to looping motion.Glossary · Web DevelopmentFront End (Front-End Development)Front end is everything in a website that runs in the visitor's browser: the HTML structure, CSS styling and JavaScript behavior users see and click.Guide · PerformanceCore Web Vitals Guide: Improve LCP, INP and CLS Step by StepLearn what LCP, INP and CLS measure, how lab and field data differ, and the practical fixes for images, fonts, JavaScript and layout shifts.9 min readGuide · PerformanceHow to Check Your Website Speed for Free (and What to Fix First)Test your website speed with free tools, understand the numbers in plain language, and fix the biggest problems first: images, hosting, scripts and caching.7 min readGuide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.