How to get a JavaScript / SPA site indexed by Google

If your site is a single-page app — React, Vue, Angular, or any framework that builds the page in the browser — you have an indexing risk that server-rendered sites don't. Google can render JavaScript, but rendering is a second, deferred, resource-limited pass. If your content only exists after JS runs, indexing is slower and more fragile than you think.

Why client-side rendering hurts indexing

• Googlebot fetches your HTML first. If that HTML is an empty <div id="root"></div>, there's nothing to index yet.
• Rendering (running your JS) happens later, in a separate queue, and isn't guaranteed to complete the way you expect.
• Content behind clicks, scrolls, or fetch calls the crawler doesn't trigger may never be seen.
• Other search engines and AI crawlers render JS far less reliably than Google — to them, an empty shell is all there is.

The fix: get content into the initial HTML

1. Server-side render (SSR) or statically generate (SSG) your pages so the HTML arrives with content already in it. Next.js, Nuxt, Astro, and SvelteKit all do this.
2. If you can't move to SSR/SSG, use prerendering (dynamic rendering) to serve crawlers a fully-rendered HTML snapshot.
3. Make sure each route has a real, unique URL (not a #hash route) with its own title, meta description, and canonical.
4. Don't block your JS/CSS bundles in robots.txt — Google needs them to render.

Verify what the crawler sees

Run an indexability audit that fetches the page like a crawler and check whether your main content and metadata are present in the response. Compare that to what you see in the browser. Gaps between the two are exactly what's costing you indexing.

Then push and confirm

1. Once content is in the server-rendered HTML, push the URL through the Indexing API.
2. Run a status check to confirm Google indexed the rendered content, not an empty shell.
3. For new routes, repeat — SPAs often add routes without any sitemap update, so Google has no discovery path until you provide one.