If your website is a Single Page Application (SPA) built with client-side rendering (CSR), AI search engines like ChatGPT and Perplexity often see nothing but an empty shell—no text, no headings, no content. The root cause is that AI crawlers execute little to no JavaScript, so they never trigger the code that renders your page’s content. The fix lies in pre-rendering, static generation, or hybrid rendering, and this guide walks you through each option.
What is the CSR shell problem?
A Single Page Application (SPA) loads a minimal HTML file, then uses JavaScript to fetch data and render content in the browser. For human visitors, this feels fast and seamless. For AI crawlers, which typically do not run JavaScript, the page appears as a near-blank document—sometimes just a `<div id="root"></div>` tag. This is called the "CSR shell" problem: AI sees your site’s outer structure but none of its substance.
AI search engines index content by reading raw HTML. If your content only exists after JavaScript executes, it is effectively invisible to them. This means your products, articles, FAQs, and even your brand name may be absent from AI-generated answers—a critical gap in an era where ChatGPT and Perplexity increasingly serve as the first stop for research and recommendations.
Why traditional SEO fixes don't work for AI
In the past, SEO professionals dealt with similar issues by adding metadata, sitemaps, or ensuring server-side rendering for Google. But AI engines operate differently. They don’t just index URLs; they extract meaning, relationships, and entities. If the raw HTML lacks your actual text, there is nothing for their models to process. Even a perfectly designed sitemap won’t help if the crawler retrieves an empty HTML file for each URL.
Moreover, Google’s modern crawler is more tolerant of JavaScript, but AI engines are not. They prioritize speed and cost-efficiency, and executing complex client-side scripts on every crawl is often impractical. So while your site may rank on Google, it might be mute on Perplexity or ChatGPT.
Fix 1: Pre-rendering—serve static HTML to crawlers
Pre-rendering involves generating static HTML snapshots of your SPA and serving them to bots while keeping the dynamic experience for users. Here’s how to implement it:
- Use a headless browser (like Puppeteer or Playwright) to render each page and save the output.
- Deploy middleware that detects AI crawler user agents (e.g., ChatGPT, PerplexityBot) and serves the pre-rendered HTML.
- Keep the pre-rendered versions updated whenever your content changes.
This is a practical fix for existing SPAs with a moderate number of pages. The downside is maintenance overhead—every content update requires re-rendering.
Fix 2: Static site generation (SSG)—build content at deploy time
If you’re starting fresh or can refactor, Static Site Generation eliminates the problem entirely. SSG frameworks like Next.js, Astro, or Nuxt can pre-build all HTML files at deployment time. The result is a fully readable HTML page for every route, with no JavaScript required for content visibility.
- Choose an SSG framework that fits your stack.
- Colocate content in markdown, MDX, or a headless CMS.
- Build and deploy—each page is now a static file.
This is the cleanest fix, but it means abandoning the fully dynamic nature of a pure SPA. For most marketing-driven sites, this trade-off is worth it.
Fix 3: Hybrid rendering—the best of both worlds
Hybrid rendering combines SSG for most pages and client-side rendering only where truly necessary (e.g., user dashboards, real-time data). Frameworks like Next.js offer Incremental Static Regeneration (ISR), which allows you to update static pages without full rebuilds. This approach ensures your AI-visible content is always static, while interactive parts remain dynamic.
- Use SSG for public-facing content pages.
- Use client-side islands for interactive components.
- Set ISR revalidation intervals to keep content fresh.
This is the recommended long-term approach for AI visibility and user experience.
DIY vs hiring a service
Fixing a CSR shell problem yourself is feasible if you have strong front-end expertise and time to manage re-rendering logic. However, for businesses without developer resources, auditing and restructuring a legacy SPA can take weeks—and mistakes are costly in lost AI visibility. A specialist service can diagnose your exact issues and implement fixes faster, often at a lower total cost than hiring a full-time developer. For instance, our AI-Ready Website Retrofit costs ฿12,900 and includes a technical audit, pre-rendering setup guidance, and a delivery handoff with clear next steps.
Common questions
How do I know if my SPA is invisible to AI search engines?
Run a simple test: fetch your live page with JavaScript disabled (or use an online "view-source" tool). If the HTML contains no article text, headings, or product details, AI crawlers see the same thing. You can also use our free AI Search Health Check, which delivers a report on your site's AI readiness.
Will adding meta tags or structured data fix the CSR shell problem?
No. Meta tags and structured data help describe content, but if the content itself is absent from the raw HTML, these additions have nothing to reference. You must first ensure the content is present in the initial HTML response.
Does Google's search performance matter for AI engines?
Not necessarily. Google’s crawler can render JavaScript, so your site might rank fine there while being invisible to ChatGPT or Perplexity. AI engines use different crawling and parsing methods, so you need to build for their constraints specifically, not just for Google.