The step where client JavaScript attaches to server-rendered HTML to make it interactive.
Hydration is the process by which a client-side JavaScript framework takes over static HTML that was rendered on the server and makes it interactive. The server sends ready-to-display HTML; then, in the browser, the framework walks that markup, attaches event listeners, and reconnects its internal state so buttons, forms, and dynamic behaviour work.
Hydration is what bridges server-side rendering and a live single-page app. Done well it is invisible; done poorly it causes wasted work, delayed interactivity, and layout shifts.
Between the moment a server-rendered page appears and the moment hydration finishes, the page looks ready but may not respond to clicks. On heavy pages this gap hurts interactivity metrics like INP and frustrates users who tap something that does nothing.
The framework re-runs enough of the app in the browser to match the server HTML, then binds interactivity to it instead of rebuilding the DOM from scratch. Modern approaches reduce the cost of this step.
The most common bug is a mismatch between server and client HTML, which forces the framework to discard and rebuild the DOM, causing flicker and layout shift. Hydrating everything eagerly on large pages is another, since it blocks the main thread and delays interactivity.
Rendering a page's HTML on the server so it arrives ready to display, before JavaScript runs.
A content system that stores and serves content via API, leaving the front end entirely to you.
A defined contract that lets two software systems talk to each other in a predictable way.
Common questions
Straight answers on how this fits your marketing and build.
It is when the HTML the client renders does not match the HTML the server sent. The framework then has to discard the server markup and rebuild it, causing flicker, layout shift, and wasted work.
Still have questions? Talk to a specialist
Get a free audit and a 6-month roadmap showing exactly where you stand vs your top 3 competitors — no fluff, no upsell.
Trusted by 500+ brands · 4.9/5 client rating