SupaIntent logoSupaIntent
AI Visibility8 min read

Does JavaScript Hide Your Product From ChatGPT?

Most AI crawlers do not run JavaScript, so client-rendered content can look blank to ChatGPT. How to check and fix it with SSR, SSG, and Next.js.

TL;DR: Most AI crawlers do not run a browser. They read the raw HTML your server returns and stop there, so content injected by client-side JavaScript can look like a near-empty page. Googlebot renders JavaScript, so "Google sees it" does not mean ChatGPT, Claude, or Perplexity do. The fix is to put your important content in the initial HTML, with server-side rendering or static generation.

Open your site, right-click, and choose View Source. That raw HTML, before any script runs, is roughly what most AI crawlers see.

If your homepage looks rich in the browser but View Source shows an empty shell, you have a rendering problem. The page is built for humans with browsers. It is not built for the bots that feed AI answers.

This guide explains why that happens, which crawlers are affected, how to check your own site, and how developers can fix it.

The blank-screen problem

Modern web apps often send the browser a nearly empty page and let JavaScript build the rest. In the browser, it looks great. In the raw HTML, it can look like this:

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

A person never notices, because their browser runs that script and paints the real page. A crawler that does not run scripts sees the shell and little else. At that point the HTML contains none of your real content. The headline, the value proposition, the pricing, and the documentation are all built later by the script.

For a search engine like Google, this is often recoverable. For most AI crawlers, it is not. The reason comes down to whether a crawler renders the page, and most of them do not.

Server-side vs client-side rendering, in plain terms

There are a few ways a page can be built. The difference is where and when the HTML gets created.

Client-side rendering (CSR) sends a minimal shell, then JavaScript downloads and builds the page in the browser. This is the classic single-page app. It is fine for logged-in dashboards. It is risky for public marketing and docs pages, because the content only exists after scripts run.

Server-side rendering (SSR) returns HTML that already contains the real content. Scripts still load for interactivity, but the words are in the initial response. A crawler that never runs JavaScript still gets the full text.

Static site generation (SSG) renders pages to HTML at build time. Great for marketing pages, docs, blogs, and comparison pages that do not change on every request.

Hydration is the good middle path. The server ships meaningful HTML first, then JavaScript "hydrates" it to add interactivity. It has its own costs, like larger bundles and the occasional hydration mismatch, but the content is in the HTML from the start, which is what bots need.

The rule of thumb: if a bot needs to run your JavaScript to see your main content, assume many bots will not.

Which crawlers run JavaScript, and which do not

This is the part most teams get wrong. They assume that because Google can handle JavaScript, every crawler can. That assumption is expensive.

Googlebot does render JavaScript. It uses a Web Rendering Service based on a current version of Chromium, per Google Search Central. The catch is that it happens in two waves. First Google reads the raw HTML. Later, when resources allow, it queues the page and runs the JavaScript. That second wave can lag from hours to weeks, and it can fail on blocked resources, heavy bundles, or hydration errors.

Most AI crawlers do not render at all. A Vercel and MERJ analysis of more than 500 million GPTBot fetches found zero JavaScript execution, per Vercel. As of 2026, the major AI crawlers, including GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, and PerplexityBot, fetch raw HTML and extract text from it. Some download JavaScript files but never execute them. They cannot read client-side content.

CrawlerRenders JavaScript?
GooglebotYes, in a delayed second wave
GPTBot (OpenAI)No
OAI-SearchBot / ChatGPT-UserNo
ClaudeBot (Anthropic)No
PerplexityBotNo

The takeaway is one sentence. "Google can see it" is not the same as "ChatGPT, Claude, or Perplexity can see it." If your content depends on client-side rendering, the AI systems that increasingly shape buyer research may be reading a blank page.

Rendering is not the same as being cited

One caveat keeps this honest. Fixing rendering makes your content readable to bots. It does not guarantee anything after that.

It helps to separate the steps. Crawling is a bot fetching your URL. Rendering is a bot running your JavaScript to build the page. Retrieval is an AI product pulling your content to answer a question. Citation is the AI choosing to use it. Server-side rendering fixes the first two. Whether you then get retrieved and cited still depends on content quality, authority, and third-party corroboration. Being readable is the entry ticket for being visible in AI answers, not the prize.

How to check if JavaScript is hiding your content

You can diagnose this in a few minutes, no developer required.

  • View Source. Right-click your page and choose View Source, not Inspect. Inspect shows the rendered DOM. View Source shows the raw HTML a bot receives. Search it for your headline or a paragraph of body copy. If it is missing, so is it for non-rendering crawlers.
  • Disable JavaScript. In your browser dev tools, turn JavaScript off and reload. If the page goes blank or loses its main content, that is what most AI crawlers experience.
  • Fetch the raw HTML. A developer can run curl https://yourdomain.com/pricing and read exactly what the server returns before any script runs.

Do this for the pages that matter most: homepage, pricing, key feature pages, integration pages, and docs. Those are the ones AI systems reach for when answering buyer questions.

How to fix it

The goal is simple. Put your important content in the HTML the server sends, before any JavaScript runs. Here is the same content, first as a bot sees CSR, then as SSR.

<!-- Client-side rendering: what a non-rendering bot sees -->
<div id="root"></div>
<script src="/assets/app.js"></script>

<!-- Server-side rendering: content is already there -->
<h1>AcmeFlow: project management for agencies</h1>
<p>Plan projects, track approvals, and report to clients in one workspace.</p>

For developers, the practical options, in rough order of preference:

  • Server-side rendering or static generation for all public marketing and docs pages. This is the durable fix. Content ships in the HTML.
  • Hydration. Render content on the server, then hydrate for interactivity, so nothing important waits on the client.
  • Prerendering as a fallback. If you cannot convert a legacy single-page app quickly, a prerender step can serve rendered HTML snapshots. Treat it as a bridge, not a destination. Google now frames this kind of dynamic rendering as a workaround, not a long-term recommendation.

In Next.js specifically, the patterns that keep content visible to bots:

  • Use the App Router with Server Components so pages render on the server by default.
  • Keep critical text in server-rendered output, and reserve client components for genuinely interactive parts.
  • Set metadata with generateMetadata, not client-side effects.

The patterns that cause the blank-screen problem:

  • Fetching your main content in the browser, for example in a useEffect, so it is missing from the server response.
  • Gating core content behind client-side state or user interaction, so it only appears after the page loads.
  • Relying on browser-only APIs to produce the main text.

One clarification, since it trips people up: marking a component "use client" does not by itself hide content. Next.js still renders client components to HTML on the first request. The problem is content that is fetched or built only in the browser.

Common mistakes to avoid

  • Assuming Google's rendering covers every bot. It does not. AI crawlers mostly read raw HTML.
  • Testing only in the browser. The browser always runs your JavaScript. Bots often do not. Check View Source and curl.
  • Putting pricing and feature copy behind client-side fetches. These are exactly the pages AI answers reach for.
  • Treating prerendering as the final answer. It is a patch. Server rendering is the durable fix.
  • Blocking JS or CSS resources that a renderer would need, then wondering why even Google struggles.

Where to look next

Making your content readable removes a blocker. It does not tell you whether AI systems now describe your product correctly, which competitors they name instead, or which sources they cite. Seeing that requires measuring your actual presence across ChatGPT, Gemini, Perplexity, and Google AI Mode. That is what SupaIntent helps with, connecting technical fixes to real answer-level visibility.

FAQ

Can AI crawlers read JavaScript websites?

Mostly no. As of 2026, the major AI crawlers, including GPTBot, OAI-SearchBot, ClaudeBot, and PerplexityBot, fetch raw HTML and do not execute JavaScript. If your content is injected by client-side scripts, those crawlers can see a near-empty page. Googlebot is the main exception, though it renders on a delay.

Does JavaScript hurt my SEO and AI visibility?

JavaScript itself is fine. The problem is content that only exists after scripts run. Google can usually render it eventually, but most AI crawlers cannot. Putting your main content in server-rendered HTML avoids the issue for both.

How do I know if my site is affected?

Open View Source (not Inspect) and search for your headline or body copy. Or disable JavaScript and reload. If the main content disappears, non-rendering crawlers are seeing the same emptiness.

Is server-side rendering better than client-side rendering for AI?

For public marketing and docs pages, yes. Server-side rendering and static generation put your content in the initial HTML, which every crawler can read. Client-side rendering is better reserved for logged-in app views that bots do not need.

Do I need to rebuild my whole site?

Usually not. Start with the pages that matter most for discovery: homepage, pricing, feature, integration, and docs pages. Convert those to server-side rendering or static generation, or add prerendering as a temporary bridge.

Your product might be strong, well-priced, and well-documented, and still be invisible to the systems buyers now ask. Often the reason is not your content. It is that the content never made it into the HTML. Check View Source on your most important page today. If your value proposition is not in there, neither is it for the AI reading it.

Reveal where AI sends your clients

Track prompt-level visibility across ChatGPT, Gemini, Perplexity, and Google AI search. See which competitors win the answer, which sources shape the response, and where your brand is missing.

550+ websites already analyzed this week