Why React applications struggle with search engine visibility, and why AI search makes the problem even worse.
When you build a React app with Create React App, Vite, or similar tools, your website's HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<!-- No content here -->
<script src="/static/js/bundle.js"></script>
</body>
</html> Your beautiful React components, content, and UI only appear after the JavaScript bundle downloads and executes. Until then, the page is effectively empty—and that's exactly what crawlers often see.
Why client-side rendered React apps struggle with search visibility.
Google uses a two-phase indexing system. First, it crawls HTML. Then, in a separate queue, it renders JavaScript. This render queue has limited resources and may take days or weeks to process your pages.
Complex React apps with API calls, authentication, or heavy components may timeout or error during Google's rendering. When rendering fails, Google indexes whatever HTML it initially received—often nothing useful.
Perplexity, ChatGPT, Claude, and Google AI Overviews have limited JavaScript rendering. They primarily read raw HTML. Client-side React apps are essentially invisible to AI search systems.
Large JavaScript bundles hurt Largest Contentful Paint (LCP). Hydration causes layout shifts. Heavy client processing slows First Input Delay. These metrics directly affect Google rankings.
React SEO problems show up as specific issues in Google Search Console. Here's what to look for:
Google found your page but hasn't rendered it yet. Your page is sitting in the JavaScript rendering queue, waiting to be processed.
Google crawled your page but found no indexable content. Likely the JavaScript failed to render, or Google saw empty HTML and moved on.
Use Search Console's URL Inspection tool and compare "Crawled HTML" to "Rendered HTML." If key content is missing from rendered output, your React app is timing out or erroring during Google's render process.
Options for making React content visible to search engines.
For marketing sites, blogs, and content-focused pages, use Astro instead of React. Astro generates static HTML with zero JavaScript by default, giving you perfect SEO and AI visibility without complexity.
If you need React, Next.js with static export (or App Router with appropriate settings) pre-renders pages at build time. You get React's component model with static HTML output.
Next.js, Remix, or custom SSR setups render React on each request. HTML is complete when crawlers receive it. More complex to set up and maintain, with higher hosting costs.
Services like Prerender.io or similar solutions try to solve CSR SEO by serving pre-rendered pages to crawlers. These are band-aids that add complexity, cost, and potential points of failure. Fix the architecture instead.
Choosing the right tool for the job.
| Factor | React (CSR) | Astro (SSG) |
|---|---|---|
| SEO Visibility | Poor | Excellent |
| AI Search Citations | Invisible | Visible |
| Initial Page Load | Slow (JS bundle) | Instant |
| JavaScript Shipped | 100KB+ minimum | 0KB default |
| Best For | Interactive apps | Marketing, content |
| Complexity | Higher | Lower |
Pagesmith generates static Astro sites that avoid React's SEO problems entirely. Get AI-powered site generation with perfect search visibility.
No JavaScript required to see content. Crawlers see everything.
Schema markup, semantic HTML, and structured content for AI visibility.
Zero JavaScript bundle means instant loads and perfect Core Web Vitals.
<!DOCTYPE html> <html> <head> <title>Your SEO Title</title> <meta name="description" content="..."> <script type="application/ld+json"> {"{"}"@type": "FAQPage"...{"}"} </script> </head> <body> <h1>Your Headline</h1> <p>All content visible...</p> <section>More content...</section> </body> </html>
Complete HTML from the first byte. No waiting, no rendering, no failures.
Generate static Astro sites with AI. Perfect SEO, instant loads, and visibility in AI search—without the React complexity.
React apps that use client-side rendering send empty HTML to search engines. Content only appears after JavaScript executes in the browser. While Google can eventually render JavaScript, it's slower, less reliable, and AI search systems like Perplexity and ChatGPT often can't render it at all.
Yes, but it requires either Server-Side Rendering (SSR) with frameworks like Next.js, or Static Site Generation (SSG) with next export or Gatsby. These approaches pre-render HTML on the server so crawlers see content immediately. Pure client-side React (Create React App) remains problematic for SEO.
Google can index React websites, but with significant delays and limitations. Google has a two-phase indexing process: crawl, then render. JavaScript rendering happens in a separate queue with resource limits. Complex React apps may timeout or fail to render completely, resulting in incomplete indexing.
AI search systems like Perplexity, ChatGPT, and Google AI Overviews have limited or no JavaScript rendering capability. They read raw HTML responses. Client-side rendered React apps send empty divs in their HTML, so AI systems see nothing to cite. This is a fundamental architectural mismatch.
For marketing sites where SEO matters, Astro is the better choice. Astro generates static HTML with zero JavaScript by default, giving you perfect SEO and AI visibility. React's strengths (rich interactivity, component reuse) aren't needed for most marketing content. Use React for apps, Astro for marketing.