Client-side rendering (CSR): definition and AI crawler risk

Client-side rendering (CSR) is a rendering approach where the server returns a minimal HTML document and a JavaScript bundle, and the browser builds the visible page by running that JavaScript. The content a person reads (headings, prices, product names, copy) is not in the HTML the server sent. It is created afterwards, in the client.

The opposite approach is server-side rendering, where the server sends HTML that already contains the content. For a full treatment of how each crawler handles scripts, see the guide on JavaScript rendering and AI crawlers. This entry stays a definition.

A typical CSR page loads in three steps:

1. The server returns an HTML shell with an empty container and a script tag.
2. The browser downloads and executes the JavaScript.
3. The script fetches data, often from an API, and writes the content into the page.

The raw response can be as thin as this:

<body>
  <div id="root"></div>
  <script src="/app.js"></script>
</body>

A human visitor never notices, because the browser finishes step 3 in moments. A crawler that stops at step 1 sees an empty container. The gap between the raw HTML and the rendered page (the DOM after scripts run) is what matters. Tabs, accordions and "load more" buttons that fetch content on interaction create the same gap at a smaller scale.

Vercel's crawler study (published December 2024, updated February 2025) found that ChatGPT and Claude crawlers fetch JavaScript files (11.50% and 23.84% of their requests) but don't execute them, so they can't read client-side rendered content. The details are in our write-up of Vercel's AI crawler study. Independent re-testing in June 2026 reported the same for GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-SearchBot, PerplexityBot, Meta-ExternalAgent and Bytespider.

Googlebot is the main exception, as of October 2026: Google renders JavaScript, and AppleBot renders through a browser-based crawler. So a CSR page can look fine in Google and still be blank to ChatGPT search or Perplexity.

This is an access problem, the stage before any engine decides what to retrieve or cite. If your pricing exists only after hydration, a non-rendering crawler stores a page without your pricing. Nothing later in the pipeline can quote a sentence the crawler never saw.

The next move is to run a raw HTML vs rendered DOM check on your highest-value pages and list every fact that appears only after JavaScript runs.

"The crawler fetched my JavaScript, so it read it"

Fetching is not executing. Vercel's data shows AI crawlers downloading script files without running them.

"Built with React means invisible"

Not necessarily. React and similar frameworks can render on the server or prerender pages at build time. What matters is whether the content is in the first HTML response. Our answer on whether ChatGPT can read a React website covers the common setups. Vercel also notes that JSON or server component data included in the initial HTML response may still be indexed.

"Google renders, so I'm covered"

You're covered for Google surfaces only. Google AI Overviews and AI Mode require a page to be indexed and eligible for a snippet, and Googlebot handles the rendering. Other AI crawlers do not.

"Switching to SSR will get me cited"

It removes a block. It does not make an engine more likely to select you. See whether SSR increases AI citations for what the evidence does and doesn't support.

• JavaScript rendering: the process of executing scripts to produce the final page, and which crawlers do it.
• Server-side rendering: delivering content in the initial HTML, the usual fix for CSR gaps.
• Prerendering: generating static HTML ahead of time so crawlers receive full content without running scripts.
• Hydration: the step where client-side JavaScript attaches behavior to server-delivered HTML.
• Rendered DOM: the page structure after scripts have run, as opposed to the raw HTML response.

How can I tell if my site uses client-side rendering? Fetch a page with JavaScript disabled, or view the raw page source rather than the inspector. If the main text, headings and prices are missing and you see an empty container plus script tags, that content is client-side rendered. Then load the page normally and compare. Anything present only in the second view is invisible to crawlers that don't execute JavaScript.

Does client-side rendering affect Google AI Overviews? Less than it affects other engines. Googlebot renders JavaScript, so Google can usually see CSR content. Google states that to appear as a supporting link in AI Overviews or AI Mode, a page must be indexed and eligible to be shown with a snippet, with no additional technical requirements. Our answer on [whether AI Overviews need server-side rendering](/questions/do-ai-overviews-need-server-side-rendering) covers the edge cases.

Do I have to rebuild my whole site to fix CSR? Usually not. Start with the pages and facts that matter most: pricing, product names, definitions, contact details and core claims. Server-render or prerender those, then confirm they appear in the raw HTML. Many frameworks let you change rendering mode per route, so you can fix the load-bearing pages first and leave low-value interactive views client-side.

Is client-side rendering bad for SEO in general? Not for Google, which renders JavaScript as part of indexing, though Google's own JavaScript SEO guidance explains the extra steps involved. The bigger risk in 2026 is non-Google AI crawlers that read only raw HTML. If you care about appearing in ChatGPT search, Perplexity or Claude answers, treat client-side-only content as content those crawlers cannot see.