Why AI crawlers see an empty page (and how to fix it)

The problem

Many React, Vue, and AI-builder sites ship a shell like <div id="root"></div> and fill the page only after JavaScript runs. Humans with Chrome see a full site. Crawlers that do not run JS see titles, maybe a generic meta description, and almost no body text—so they cannot quote or cite you.

How to confirm it

1. Open view-source:https://yourdomain.com (or “View page source”). Look for your real headings and paragraphs in the raw HTML.
2. Disable JavaScript and reload. If the page goes blank, crawlers that skip JS see the same blank.
3. Run a server-HTML checker. Shipcheck warns when the body has under roughly 150 words of text in the response.

How to fix it

• SSR or SSG: Next.js, Nuxt, Astro, and similar frameworks that render HTML on the server or at build time.
• Pre-render: Generate static HTML for marketing routes even if the app is a SPA.
• Keep critical copy in HTML: Hero headline, product explanation, and FAQ answers should exist without waiting for client fetch.

For builder-specific launch issues, see the launch checklist for AI-built sites.

Robots and firewalls

Even perfect HTML fails if you block AI search crawlers in robots.txt or at the CDN. Allow search bots such as OAI-SearchBot and PerplexityBot if you want citations; decide separately on training bots. Full rules: robots.txt for AI crawlers.

Re-check after you ship

After you enable SSR or pre-render, re-run the website checker and confirm the “Content is in the server HTML” style pass. Then ask ChatGPT or Perplexity a question your page should answer and see whether they can read it. For the broader GEO playbook, read how to get cited by AI search.