# Hydration

> The step where JavaScript takes over server-rendered HTML in the browser and makes it interactive.

Server rendering gets readable content on screen quickly. Hydration is what happens next: the framework downloads, re-runs the component tree, matches it against the existing markup and attaches the event handlers. Until that finishes, the page looks ready and is not — buttons are visible and do nothing, which is a worse experience than an honest spinner.

Two failure modes are worth knowing. A mismatch, where the server and the client disagree about what should be there, produces a console error and a re-render — anything that depends on the current time, a random value or the window will do it. And an over-hydrated page ships interactivity for components that never needed it, which is why the useful question is which parts of a page actually have to be alive.

## Related terms

- https://dfieldsolutions.com/en/glossary/static-generation.md
- https://dfieldsolutions.com/en/glossary/core-web-vitals.md
- https://dfieldsolutions.com/en/glossary/lcp.md

---

Source: https://dfieldsolutions.com/en/glossary/hydration
DField Solutions — Dunakeszi, Hungary — dezso@dfieldsolutions.com
Booking: see https://dfieldsolutions.com/en/contact