Newnessimworks.com
Glossary · Web development

Hydration

The browser process of attaching JavaScript event handlers to server-rendered HTML, making a static-looking page interactive.

Definition

In long form.

When SSR or SSG ships HTML to the browser, the page looks visually complete immediately — but it's not yet interactive. Hydration is the JS bundle running, walking the DOM, and attaching event listeners and state. Until hydration completes, clicks don't work, forms don't submit, and components like accordions won't open. Heavy JS bundles cause long hydration times, hurting INP (Interaction to Next Paint). React Server Components and partial hydration approaches are designed to reduce hydration cost.

In context

When a server-rendered page shows but clicks do nothing for a second, that's hydration latency. The fix is shipping less JS — code splitting, replacing client components with server components, deferring third-party scripts.

Discovery first

Talk to us about your engagement.

Discovery calls are free. Scope, timelines, and pricing are quoted after we understand what you’re solving.