A founder showed me a website last month that looked genuinely impressive. Clean animations, sharp copy, a pricing table that slid in on scroll. He built the whole thing in an afternoon by describing it to an AI tool, and could not understand why, three months later, it had zero presence on Google. Not low rankings. Zero. It did not even appear for its own brand name.

Here is the uncomfortable truth about a lot of these projects: a vibe-coded website can look completely finished to you and be completely invisible to a search engine at the same time. The page works. The crawl does not. Those are two different things, and AI builders almost never warn you about the gap.

What "Vibe Coding" Actually Produces

Vibe coding is building software by describing what you want in plain language and letting an AI tool write the code. You say "make me a landing page for a dog-walking app with a dark theme," and tools like Lovable, Bolt, v0, Cursor, or Replit hand you a working app in seconds. It feels like magic because it mostly works, with no need to understand the code underneath.

The catch lives in a default almost nobody chooses on purpose. These tools overwhelmingly generate a React single-page application, because React dominates their training data and starter templates. It is the most-used front-end library in the world - 39.5% of developers reported using it in the 2024 Stack Overflow Developer Survey. So when you ask for "a website," what you get is a React app that renders everything in the browser, and that one decision is the root of the ranking problem.

Why AI Tools Default to Client-Side React

React, in its plain form, is a client-side rendering library. The server sends a near-empty HTML file with a single empty container, usually something like <div id="root"></div>, plus a large JavaScript bundle. The browser downloads that bundle, runs it, and only then builds the page you see.

For a human this is fine, because your browser executes JavaScript instantly and the page appears complete. For a crawler it is a problem, because the first thing it receives is that empty shell. AI builders default to this because it is the simplest setup that looks correct on your screen, optimizing for "looks done in the preview" rather than "ranks in search."

CSR vs SSR vs SSG: What the Crawler Actually Receives

The whole issue comes down to one question. When a search engine requests your page, what shows up in that first response, before any JavaScript runs? There are three common approaches.

Client-side rendering (CSR) sends an empty HTML shell and a JavaScript bundle, and the content is assembled in the browser after the script runs. This is the default for plain React and for most vibe-coded sites.

Server-side rendering (SSR) runs the JavaScript on the server for each request and sends back fully formed HTML, so the content is already there in the first response. Next.js, Remix, Nuxt, and SvelteKit can all do this.

Static site generation (SSG) builds every page into plain HTML ahead of time, at deploy. There is no per-request work and no waiting on JavaScript. This is Astro's default.

What Googlebot Sees vs What You See

This trips up almost everyone, because it is invisible during normal use. When you visit your own site, your browser does all the work: it fetches the shell, runs the JavaScript, and paints the finished page.

Googlebot does not work in one pass like that. It fetches the raw HTML first, and for a client-side React app that raw HTML is the empty shell, with nothing to index except a script tag and an empty container.

The Two-Wave Problem

Google handles JavaScript rendering in two stages, often described as two-wave indexing.

In the first wave, Googlebot crawls and indexes whatever is in the raw HTML. For a server-rendered or static page, that is your full content. For a client-side app, that is the empty shell, so there is essentially nothing to index.

In the second wave, Google queues the page for rendering, runs the JavaScript, and sees the real content. The catch is that this wave is deferred and not guaranteed. Google often renders within seconds, but rendering is queued work, and for a new low-authority site it can be deprioritized long enough that your content does not reliably reach the index.

So your brand new vibe-coded website sits in a queue. Google has seen a blank page and has little reason to prioritize rendering it, so the content you are proud of never enters the index.

Why "It Looks Done So It Feels Done" Is the Trap

This catches smart people off guard for psychological reasons, not technical ones. The site works. You can click through it, fill out the form, watch the animations, and every signal your eyes get says "shipped." But "works in a browser" and "visible to a crawler" are separate properties, and a site can be flawless for humans and a blank page for search engines on the same day.

How to Check Your Site in Two Minutes

You do not need to guess. There are a few fast ways to see exactly what a crawler gets.

1. Paste a page URL into the URL Inspection bar in Google Search Console.
2. Click Test Live URL to fetch the page as Googlebot would.
3. Click View Tested Page, then open the HTML tab to read the rendered HTML and check the screenshot tab.
4. If your main content, headings, and body text are not present in that rendered HTML, Google is not reliably seeing them.

A few faster, rougher checks you can run in seconds:

• Site search. Search site:yourdomain.com on Google. If few or none of your pages appear, your content is likely not being indexed.
• Unique sentence search. Copy a distinctive sentence from your page and search it in quotes. If Google cannot find your own exact text, it has not indexed that content.
• Disable JavaScript. Turn off JavaScript in your browser and reload. What remains is close to what a crawler gets on the first pass. If the page goes blank, that is your answer.

Is React Good for SEO?

This is the question I get most, and most React SEO advice buries the honest answer: React is not the villain here. Used correctly, it is perfectly capable of ranking. The frameworks built on top of it, like Next.js and Remix, exist partly to solve this exact problem by rendering HTML on the server or generating it statically, and plenty of large, well-ranked sites run on React.

The villain is client-side rendering with no fallback HTML. The problem is not React, it is React that only renders in the browser. Fix where the rendering happens and React becomes a non-issue for search.

The JavaScript SEO Fix

Here is the good news: you almost never have to start over. The goal of any JavaScript SEO fix is simple: make sure your real content is present in the HTML of that first response, before any JavaScript runs.

Option 1: Use a Framework That Renders HTML by Default

If rebuilding is still cheap, pick a framework that ships HTML out of the box.

• Next.js gives you SSR and SSG, and is the most common React choice for this.
• Astro is static-first and HTML-first, sending almost no JavaScript unless you ask for it.
• Remix server-renders by default.
• SvelteKit and Nuxt are the equivalent picks if you prefer Svelte or Vue.

Option 2: Add SSR, SSG, or Prerendering to the App You Have

If you like the site you built, you usually do not need to scrap it. Most modern setups let you add server-side rendering, static generation, or prerendering to the existing app.

And here is the part that fits the vibe-coding workflow perfectly: you can ask the AI tool that built the site to do this. A prompt as direct as "convert this app to use server-side rendering so the content is in the initial HTML" is often enough.

Option 3: Prerender Static Snapshots for the Crawler

If neither of the above fits, prerendering generates static HTML snapshots of your pages and serves those to crawlers. It is the most patchwork option, but it does get real content into that first response when nothing else is practical.

The Honest Takeaway

A vibe-coded website is one of the most empowering things to come out of AI tooling. You can ship a real, working site in an afternoon with no engineering team, which is genuinely great.

But "works in my browser" is not the same as "found on Google," and these tools rarely close that gap for you. Most default to client-side React, which hands Googlebot an empty shell and trusts a deferred second wave of rendering that may never arrive. Looking done and being indexable are separate facts, and only one of them shows up in your browser preview.

The fix is rarely a rebuild. Run the Search Console check, see what the crawler really gets, and if your content is missing, move to a stack that renders HTML by default or add server rendering to the app you have. You can even ask the same AI that built it to make the change.