Hydration
Hydration is the process where JavaScript attaches interactivity to server-rendered HTML in the browser, letting a page be both crawlable as text and interactive for users.
Hydration makes server-rendered HTML interactive. With server-side rendering, the browser first receives complete HTML — readable immediately by users and crawlers — and then JavaScript "hydrates" it, wiring up clicks, forms, and dynamic behavior on top of the already-present markup.
This is the best-of-both pattern for the access pillar: because the content exists in the initial HTML before hydration, AI crawlers that don't run JavaScript still see it, while human visitors get a fully interactive page once hydration completes. The caveat is performance — heavy hydration can delay interactivity and hurt Core Web Vitals — so the goal is to keep content in the server HTML and hydrate only what genuinely needs to be interactive.
Example. A product page renders its full description and price on the server (crawlers read it instantly), then hydrates to enable the "add to cart" button for shoppers — the content visible to machines without waiting on JavaScript.
Relevant pillar
Related terms
- Client-Side Rendering (CSR)Client-side rendering is when a page ships minimal HTML and builds its content in the browser with JavaScript, which can hide that content from AI crawlers that don't execute scripts.
- Server-Side Rendering (SSR)Server-side rendering is when a web server generates a page's full HTML for each request and sends it ready-to-read, so content is present immediately for both browsers and AI crawlers.
- Core Web VitalsCore Web Vitals are Google's set of user-experience metrics for loading, interactivity, and visual stability, a measurable proxy for the page speed and quality that support AI visibility.