Hydration: definition and the AI crawler gap

99Visibility Research · Updated October 21, 2026 · 4 min read

Short answer

Hydration is the step where JavaScript in the browser attaches to HTML the server already sent, making the page interactive and often adding content. For AI visibility, the added content is the risk. Most AI crawlers fetch raw HTML and don't run JavaScript, so facts that only appear after hydration may never reach them. A hydration diff compares the two versions and lists what is missing.

Key takeaways

Hydration turns server-sent HTML into an interactive page, and many sites also use it to load prices, specs and copy.
Vercel found that ChatGPT and Claude crawlers fetch JavaScript files but don't execute them, so hydration-only content is invisible to them.
Googlebot renders JavaScript, so a page can look fine in Google and still be empty to AI crawlers.
A hydration diff compares raw HTML with the rendered page and lists the facts that exist only after JavaScript runs.
Fixing a hydration gap makes your content eligible to be read. It does not guarantee that any engine will cite it.

Definition

Hydration is the process where client-side JavaScript takes over a page the server has already rendered as HTML. The framework attaches event handlers, restores state, and makes buttons, menus and forms work.

On many sites, hydration also adds content. A product page might ship a shell from the server, then fetch the price, stock level and reviews once JavaScript runs. That second category is what matters for AI crawlers. Hydration itself is not the problem. Content that exists only after hydration is.

Hydration is one part of the broader topic of JavaScript rendering, which covers every way a page's final content depends on scripts.

How it works, and how to check it

A hydrated page arrives in two layers:

Raw HTML: what the server returns before any script runs. This is what a crawler that doesn't execute JavaScript sees.
Rendered DOM: what a browser shows after scripts run, data loads and components mount.

A hydration diff compares the two. The steps:

Fetch the URL with JavaScript disabled and extract the visible text.
Load the same URL in a headless browser and extract the visible text again.
Diff the two and list the headings, prices, product names and claims that appear only in the rendered version.
Mark which of those facts you'd want an AI answer to quote.

The raw HTML vs rendered DOM check walks through the method, and the playbook on how to find facts hidden behind JavaScript covers turning the diff into a fix list. Content behind tabs, accordions or "load more" buttons fails the same way, which the page on lazy-loaded content covers.

Why it matters for AI visibility

Vercel's crawler study reported that ChatGPT and Claude crawlers do fetch JavaScript files (11.50% and 23.84% of their requests) but "they don't execute them. They can't read client-side rendered content." Our summary of Vercel's study covers its limits: it is a one-month snapshot from late 2024 on a Next.js-heavy sample, and Vercel sells server-side rendering.

Independent re-testing in June 2026 found the same for GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-SearchBot, PerplexityBot, Meta-ExternalAgent and Bytespider. Googlebot and AppleBot are the exceptions, because they render pages.

What it means: a page can be indexed and quoted in Google while ChatGPT search, Claude and Perplexity see an empty template. Of the evidence on what publishers control, this is the strongest. The next move is to run the diff on your highest-value pages (pricing, product, about) and move any missing facts into the server response, through server-side rendering, prerendering or static generation. The client-side vs server-side rendering comparison sets out the options.

Common misconceptions

"Hydration is bad for AI"

No. A page that sends full content in its HTML and then hydrates for interactivity is fine. The crawler reads the HTML and ignores the scripts.

"If Google sees it, every AI engine does"

Google documents that Googlebot renders JavaScript. Most AI crawlers, as of October 2026, don't. Testing in Google alone hides the gap.

"Server-rendering the content gets you cited"

It makes the content exist for the crawler. Whether an engine retrieves and cites it depends on retrieval and generation steps you don't control. A critical survey of 45 GEO studies found no technique with a stable, cross-platform causal effect on discoverability. See whether switching to server-side rendering increases AI citations for the full answer.

"Data in a script tag is always lost"

Not necessarily. Vercel notes that JSON or React Server Component payloads in the initial HTML response may still be indexed. Content fetched later is the clear risk.

Frequently asked questions

What is a hydration diff?

A hydration diff compares the text in a page's raw HTML with the text after a browser runs its JavaScript. The output is a list of content that exists only after hydration. For AI visibility, that list is the set of facts most AI crawlers can't read, because they fetch the HTML and don't execute scripts. Prices, product specs and key claims on that list are the first things to move into the server response.

Does hydration affect Google AI Overviews?

Less directly. Googlebot renders JavaScript, so hydrated content can be indexed. Google says a page must be indexed and eligible for a snippet to appear as a supporting link in AI Overviews or AI Mode, with no extra technical requirements. The hydration gap mainly affects crawlers that don't render, such as OAI-SearchBot, ClaudeBot and PerplexityBot, as of October 2026.

Is a React or Next.js site automatically invisible to AI crawlers?

No. The framework doesn't decide it. What matters is whether the content is in the HTML the server sends. A Next.js site using server-side rendering or static generation ships full content before hydration. A single-page app that builds everything in the browser does not. Running a hydration diff on a few key pages tells you which case applies.

How often should I re-check for a hydration gap?

Re-check after any change to your frontend framework, template, or how data loads, since a deploy can quietly move content from the server response into client-side fetches. A quick diff on your pricing, product and about pages after each significant release catches the regression before it costs you anything. Nothing in the evidence sets a fixed interval, so tie the check to releases.

Sources

This page is AI-assisted. It was written from a verified evidence base and checked against our editorial policy. Engine behaviour changes often; facts are as of October 21, 2026.