Split illustration showing red spider-like AI crawlers blocked by a wall on one side, and green AI crawlers passing freely through an open server-rendered page on the other

Web Development · Blog

Client-Side Rendering Is Killing Your AI Visibility — Here's the Fix

BalochDev 6 min read

AI crawlers do not execute JavaScript. GPTBot, ClaudeBot, PerplexityBot, and OAI-SearchBot fetch your page's raw HTML and stop. If your site is built with client-side rendering — React, Vue, Angular, or any SPA where content is assembled in the browser — these crawlers receive an empty shell: a div, some script tags, and nothing to cite. A joint analysis by Vercel and MERJ found that major AI crawlers download JavaScript files but never execute them — ChatGPT's crawler fetched JS files in roughly 11.5% of requests and Claude's in roughly 23.8%, purely to read them as text, not to run them as code. A site can hold Google's top position, because Googlebot renders JS, while being completely absent from every AI answer, because AI crawlers do not. These are two separate visibility systems, and most teams don't know they're failing the second one.

This is not a theoretical risk. Glenn Gabe's August 2025 case study put a fully client-side-rendered site under the microscope and found it looked entirely blank to ChatGPT, Perplexity, and Claude — when asked directly, ChatGPT reported it "could not read the content of the page because it relied on JavaScript-based rendering." Not partially indexed, not underperforming. Invisible. Here is why, how to test it, and how to fix it.

Why Googlebot can see you but AI crawlers can't

Google invested over a decade building infrastructure to render JavaScript. Googlebot's Web Rendering Service executes modern JavaScript frameworks, processes API responses, and indexes content that only exists after client-side hydration. This is expensive infrastructure that only Google has built at scale.

Analyses of GPTBot, ClaudeBot, and PerplexityBot consistently show the same pattern: they fetch HTML but never execute JavaScript. Server-side rendering is the only reliable guarantee that your content is what these crawlers actually see.

The consequence is a split-visibility problem: your Google Search Console looks healthy, traffic is steady, Googlebot is crawling everything fine — and yet your content doesn't exist for ChatGPT, Perplexity, or Google AI Overviews. Rankings can't warn you, because the ranking system uses a different crawler than the citation system.

The 30-second test

Right-click any key page on your site. Select "View Page Source" (not "Inspect" — that shows the rendered DOM). Search for a sentence from your main content.

If you see your actual text content in the source code, it has been server-rendered. If you see only an empty div and script tags, you are running client-side rendering, and your content is invisible to AI crawlers.

Alternatively: open the page, open DevTools, disable JavaScript (DevTools → Command Menu → "Disable JavaScript"), and reload. If the content disappears, AI crawlers are getting a blank page. (This is the same core test we walk through in The 5-Minute Reachability Check.)

What AI crawlers actually receive from a CSR site

When GPTBot visits a React SPA, it sends an HTTP request, downloads whatever HTML the server returns, and moves on. It does not execute JavaScript. It does not wait for components to mount or API calls to resolve. If your server returns an empty shell with a script tag that loads your app, GPTBot sees nothing.

The implications extend beyond body text. Structured data injected via JavaScript is often invisible to AI crawlers too. Many sites rely on client-side JSON-LD to add schema after page load. While this may work for users and sometimes for search engines, it frequently fails for AI crawlers. If schema is not present in the initial HTML, most AI systems never see it.

The three fixes, in order of effort

Fix 1 — Static Site Generation (SSG). Generate full HTML at build time. Every page is pre-rendered into a complete HTML file. Zero JavaScript required for AI to read it. Best for content that doesn't change frequently — blogs, documentation, marketing pages. Frameworks: Next.js (export), Astro, Hugo, Eleventy. This is the highest-reliability option.

Fix 2 — Server-Side Rendering (SSR). Generate full HTML on the server at request time. Content is in the initial response before any JS runs. Best for dynamic pages (user dashboards, search results, personalized content). Frameworks: Next.js (App Router default), Nuxt, SvelteKit. The payoff is measurable: SE Ranking's analysis of 129,000 domains found pages with a First Contentful Paint under 0.4 seconds averaged 6.7 ChatGPT citations, compared to just 2.1 for pages loading slower than 1.13 seconds — roughly a 3x difference tied directly to how fast usable content appears.

Fix 3 — Hybrid rendering. Server-render the content components (article body, product description, FAQ blocks) while client-rendering interactive elements (comments, carousels, personalization). Next.js App Router server-renders components by default — as long as you haven't added "use client" to content-heavy components. This is the practical fix for large existing codebases that can't be fully rewritten.

What not to do

Dynamic rendering (serving different HTML to crawlers than to users) is a workaround that creates maintenance overhead and is explicitly considered by Google to be a workaround, not a best practice. Server-side rendering is the more sustainable solution.

Lazy loading content without a server-rendered fallback hides text from AI crawlers just as CSR does — if the text only appears after a scroll event, the crawler never sees it.

Frequently asked questions

Will fixing CSR hurt my Google rankings? No. Moving to SSR or SSG improves Google's experience too — it gets a full HTML page immediately rather than waiting for render queue. Rankings improve or stay neutral; they don't decline.

What if my app needs to be a SPA for user experience? Use hybrid rendering. Server-render the content-heavy pages (blog posts, landing pages, product pages) and keep the SPA experience for authenticated user flows where citation doesn't matter.

Do AI crawlers ever render JavaScript? As of the most recent testing, no major AI crawler — OpenAI's, Anthropic's, or Perplexity's — renders JavaScript at scale. If you want to be cited in AI answers, your content must be in the initial HTML response.

This guide is maintained by BalochDev, an AI-first software development studio. We build products — and the sites that sell them — to be found by both people and machines. Last updated 13 August 2026.

Sources & further reading