React can work well for search. Problems start when the main content only appears after JavaScript runs.
A client-rendered React setup can send a short HTML shell 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> The browser downloads JavaScript and builds the rest of the page. Google can do this too, but the content is not available until its rendering stage. If a script, resource, or API call fails, part of the page may still be missing.
These issues come from the rendering setup, not from React components themselves.
Google crawls a page, sends it to a rendering queue, and then uses the rendered HTML for indexing. Content that is already in the response does not depend on this extra step.
Blocked scripts, browser errors, authentication, and failed API calls can change what Google sees after rendering. Test the rendered page rather than assuming the browser view and crawler view match.
AI search services do not all fetch pages in the same way. Pre-rendered HTML makes the main content available without relying on crawler-side JavaScript. Access rules and content quality still decide what can be used.
Large bundles and heavy hydration can slow rendering and interaction. React sites can still pass Core Web Vitals, but doing so takes care with scripts, images, fonts, caching, and layout stability.
Search Console can help you compare what Google fetched with what it rendered. These checks are useful when content is missing from search:
Google knows the URL but has not indexed it. Rendering may be one factor, but this status does not identify a single cause by itself.
Google fetched the page and chose not to index it. Check the rendered HTML, canonical URL, content quality, internal links, and server responses.
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.
Static generation is a good fit for marketing pages, documentation, and articles. Astro puts the content in HTML and lets you add interactive components only where they are useful.
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.
A rendering service can help when you cannot change an existing app. It adds another system to monitor, so native static generation or server rendering is usually easier to maintain over time.
Choosing the right tool for the job.
| Factor | React (CSR) | Astro (SSG) |
|---|---|---|
| SEO Visibility | Needs rendering | Content in HTML |
| Crawler access | Depends on rendering | Content in response |
| Initial Page Load | Bundle dependent | HTML first |
| JavaScript Shipped | App dependent | Only when needed |
| Best For | Interactive apps | Marketing, content |
| Complexity | Higher | Lower |
Pagesmith generates static Astro sites. Search crawlers receive the page content in the first response, while interactive features can still use JavaScript.
The main page content does not depend on JavaScript execution.
Semantic HTML, metadata, sitemaps, and supported structured data.
Static delivery reduces request-time work and avoids a site-wide app bundle.
<!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>
The main content is present in the initial HTML response.
Generate a static Astro site with its main content, metadata, and site structure ready for crawlers. Rankings and citations still depend on the content.
React itself is not bad for SEO. The problem appears when a client-rendered app sends an app shell without its main content. Google can run JavaScript, but it must render the page before it can process that content. Pre-rendering removes this extra dependency.
Yes. Use static generation, server-side rendering, or another setup that includes the main content in the HTML response. React can still handle interactive parts of the page.
Yes. Google crawls, renders, and indexes JavaScript pages. If important content is missing from the initial HTML, the page must enter Google's rendering stage before that content can be processed. Broken scripts, blocked resources, or failed API calls can leave content out of the rendered page.
It can. AI search services use different crawlers and access rules. Putting the main content in the HTML response makes it available without depending on crawler-side JavaScript. You must also allow the relevant search crawler and keep the page publicly accessible.
Astro is a practical default for content-led marketing sites because it pre-renders pages and only ships JavaScript where you add interactivity. React is still a sound choice when the page needs application-style interaction, especially when you use static generation or server rendering.