Web development and performance
What is Hydration?
Hydration is the process where JavaScript takes over server-rendered HTML in the browser, attaching event handlers to make it interactive. It is why a page can look ready before it responds to clicks — the pixels arrived, the behaviour has not.
Also called: client-side hydration
Why it costs so much
The framework must download, parse and execute, then walk the existing DOM to attach handlers. On a mid-range phone that work occupies the main thread for hundreds of milliseconds, which is measured directly as Interaction to Next Paint.
The alternatives
- No hydration
- If nothing on the page needs to be interactive, ship no JavaScript at all. Most content pages qualify.
- Islands
- Hydrate only the specific components that need it, leaving the rest as static HTML.
- Progressive enhancement
- Build it working without JavaScript, then improve it. Forms are the obvious case.
The test worth running
Open a page with JavaScript disabled. Whatever still works is what you actually needed to ship, and on most marketing sites that is the whole page.
Where this is covered in depth
A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.