Skip to main content
AI Infrastructure

Client-Side Rendering (CSR)

Definition

A rendering approach where the browser runs JavaScript to fill in the content. AI crawlers don't execute JS, so CSR content is invisible to ChatGPT, Perplexity, and Claude — only Googlebot renders

#Client-Side Rendering#CSR#SSR#JavaScript rendering#AI Crawler#GPTBot#Server-Side Rendering#SSG

What is Client-Side Rendering?

Client-side rendering (CSR) is a rendering approach where the server sends only an empty HTML shell and the browser runs JavaScript to fill in the content — body, pricing, FAQ, and so on. It looks fine to a human, but to a client that doesn't execute JavaScript the page appears nearly blank. That distinction is what makes CSR a critical fork for AI search visibility.

Most AI crawlers are not browsers — they are simple HTTP fetchers. They read only the HTML in the first response, never execute JavaScript, and never wait for rendering or retry. So content filled in by CSR alone simply does not exist to GPTBot, ClaudeBot, or PerplexityBot.

CSR vs SSR vs SSG

Approach When the body is filled Exposure to AI crawlers
CSR (client-side) After the browser runs JS ❌ Invisible (blank page to non-rendering crawlers)
SSR (server-side) Server generates full HTML per request ✅ Body included in the first response
SSG (static generation) HTML pre-built at build time ✅ Body included in the first response

What matters is whether the core body is in the first HTML response. Even a CSR app can use SSR or SSG to include core content in the first response (hybrid rendering), making it readable to crawlers.

Why It's a Problem for AI Crawlers

Traditional SEO masks this issue, because Googlebot has a deferred rendering pipeline that executes JavaScript (as does Gemini, which shares that infrastructure). But the crawlers that render are essentially Google's — the crawlers for ChatGPT, Perplexity, and Claude see only the pre-render HTML.

As a result, the same page can be visible in Google Search yet missing entirely from ChatGPT and Perplexity answers. It's a classic blind spot where SEO rank and AI visibility diverge — and one you can't spot from search rankings alone.

Frequently Asked Questions

Q. Are SPAs like React or Vue always at a disadvantage?

The framework itself isn't the problem. The same React app can use SSR or SSG to put core content in the first HTML, where crawlers can read it. The problem is a pure CSR setup that fills the entire body on the client.

Q. How do I check whether my page is CSR?

Use "View Page Source" to inspect the pre-render HTML, or disable JavaScript in your browser and reload. If the body disappears and only a title and empty container remain, AI crawlers see the same thing.

Q. Does adding llms.txt fix it?

No. llms.txt is a signpost for your site structure, not a renderer. If the body isn't in the first HTML, there's no body for the crawler to read.

Related Terms

Is your site visible in AI search?

See for free how ChatGPT, Perplexity, and Gemini describe your brand.

Start Free Diagnosis →

Related terms