How to Fix Agent Compatibility in SPAs (React, Vue, Angular)
Single Page Apps are the hardest content for AI agents to read: client-side rendering means GPTBot, PerplexityBot and ClaudeBot see an empty
and not your content. This guide covers the SPA-specific fix: SSR, prerendering, or dynamic rendering. Pair with agent compat guide and the Shopify version.Step-by-step: How to make SPAs readable by AI agents
- Verify the problem. curl your homepage (or use Chrome DevTools → Network → disable JavaScript → reload). If response HTML is empty/skeletal, AI agents see nothing. Most React/Vue/Angular SPAs without SSR exhibit this.
- Choose rendering strategy. SSR (server-side render on every request — Next.js getServerSideProps, Nuxt asyncData): freshest content, more server cost. SSG (build-time render — Next.js getStaticProps, Astro, Hugo): fastest, less dynamic. Hybrid (Next.js ISR, on-demand revalidation): best of both. Prerendering services (Prerender.io, Rendertron): SPAs without rewriting.
- For Next.js: migrate to App Router with RSC. React Server Components in Next.js 13+ App Router render content on the server by default. AI agents see real HTML. Client Components ('use client') are opt-in, not default. Migration from Pages Router is non-trivial but produces best AI agent compatibility.
- For pure React (CRA, Vite): add SSR or prerender. Options: migrate to Next.js or Remix (full SSR); add Vite SSR plugin (vite-plugin-ssr / Vike); use Prerender.io as middleware (detects crawler UA, returns pre-rendered HTML).
- For Vue/Nuxt: ensure SSR mode. Nuxt 3 SSR is default; verify nuxt.config has ssr: true. Don't switch to ssr: false (SPA mode) — kills AI agent visibility.
- Verify with crawler user-agents. Chrome DevTools → user-agent switcher → GPTBot. Reload key pages. Confirm content visible in initial HTML response. View-source must show real content, not empty placeholder.
- Configure robots.txt. Allow AI agents you welcome: GPTBot, ClaudeBot, PerplexityBot, CCBot. Add explicit Allow rules. Block crawlers that have caused issues. Note Vercel/Netlify often handle robots.txt via project file (public/robots.txt or robots.txt in app root).
Frequently Asked Questions
Do AI crawlers execute JavaScript?
Some yes, most no, all inconsistently. Googlebot renders JS (with delays and resource limits). GPTBot does not currently render JS — sees only initial HTML response. PerplexityBot limited JS rendering. ClaudeBot does not render JS. For AI visibility, never rely on JS rendering — serve content in initial HTML.
SSR vs SSG vs prerendering for AI agents?
All three work — agents see real HTML. Trade-offs: SSR most dynamic but slowest, costs more. SSG fastest and cheapest but content changes need rebuild. Prerendering works for any framework as a middleware layer but adds latency for agents (worth it). For pure content sites: SSG. For dynamic apps: SSR or ISR (Next.js Incremental Static Regeneration).
Can I keep my React SPA and still rank in AI?
With prerendering yes. Services like Prerender.io detect crawler user-agents and serve cached HTML versions of your pages. The user-facing app stays a SPA; bots get rendered HTML. Costs $90-300/mo depending on page count. Cheaper to migrate to Next.js / Remix for new projects.
Does Vercel handle SSR automatically for Next.js?
Yes. Vercel runs Next.js with full SSR/SSG/ISR support. No special configuration needed. Other hosts (Netlify, Cloudflare Pages, traditional servers) also support Next.js SSR with varying setup.
How do I verify GPTBot can see my SPA content?
curl with GPTBot user-agent: `curl -A 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko); compatible; GPTBot/1.0; +https://openai.com/gptbot' https://yoursite.com/page`. Inspect output. Should include real content, not just <div id='root'></div>. If empty, your SSR isn't running for the GPTBot user-agent.