What is hydration?
Hydration is the step where a page that arrived as server-rendered HTML gets its JavaScript attached in the browser, turning static markup into an interactive page.
It sits between two extremes: pure client-side rendering, where the browser builds the page from nothing, and plain static HTML, where nothing needs attaching at all. A hydrated page shows real content immediately because the server sent complete HTML, then becomes clickable a moment later once the JavaScript takes over the DOM the server already built.
The failure mode worth knowing is a hydration mismatch, where what the server rendered and what the client expects disagree. Frameworks often recover by discarding the server HTML and rebuilding it client-side. For a moment, and in rarer cases indefinitely if the mismatch never resolves, the content on the page reverts to whatever client-side rendering produces, which for a crawler that doesn't execute JavaScript can mean content it already had disappears.
Related
- Server-side renderingServer-side rendering means the HTML arrives complete from the server. It matters because most AI crawlers do not execute JavaScript, so content injected in the browser is invisible to them.
- AI crawlerAn AI crawler is a bot operated by an AI company to fetch web pages for training, indexing, or answering a live question.
- Core Web VitalsCore Web Vitals are Google's three metrics for real-world page experience: how fast content loads, how quickly the page responds to input, and how much the layout shifts while loading.
Want to know where you actually stand on this? Run a free visibility check or try the free tools.