React vs Next.js: Why your AI-generated website is failing at SEO

Tools like v0, Bolt.new, and Claude Artifacts are excellent for generating interface prototypes within seconds. However, if you deploy that generated code directly to production, you will likely encounter a frustrating issue down the line: Google will not index your pages properly.

Here is why client-side React breaks SEO for AI-generated websites, and how to resolve it quickly.

The Problem with Client-Side Rendering (CSR)

Most AI prompts produce single-page React applications (typically bundled with Vite or Create React App). These rely entirely on client-side rendering (CSR).

When Googlebot requests a CSR page, it receives an HTML shell:

<!DOCTYPE html>
<html>
 <head></head>
 <body>
 <div id="root"></div>
 <script src="/src/main.tsx"></script>
 </body>
</html>

Your copy, headers, images, and structured metadata are missing from that initial document. They only render after the JavaScript bundle downloads and executes within the browser.

Google can execute JavaScript, but it relies on a two-wave indexing model. It fetches the raw HTML first, places the JavaScript rendering into a secondary queue, and processes it when computing resources become available. In practice, this means your pages can remain unindexed or only partially indexed for weeks.

Quick Sanity Check: "View Page Source"

Open your site, right-click, and select View Page Source (not Inspect Element). If you do not see your page's actual text inside the HTML tags, search crawlers are not seeing it on their initial pass either.

Fix It: Move to SSR or Static Generation

To rank reliably, your server needs to deliver pre-rendered HTML containing your title tags, meta descriptions, and main content on the initial request.

Option 1: Next.js

If you want to maintain your React components as they are, migrate the project to Next.js. With App Router, components render on the server by default (SSR or SSG). Instead of serving an empty root div, your server delivers full HTML directly to Googlebot.

Option 2: Astro

For content-focused projects such as blogs, landing pages, or portfolios, Astro is usually a better fit than Next.js. It eliminates unused JavaScript by default, shipping plain HTML and CSS to the client. This provides near-perfect Core Web Vitals out of the box, which directly benefits your search rankings.

Quick 3-Step Migration Plan

1. Move components into Next.js or Astro: Copy your AI-generated React components into a Next.js App Router or Astro project structure. 2. Add dynamic metadata: Define page-specific