technical-seoaudit
⚙️

JavaScript SEO in 2026: SPA, hydration, and why your page won't index

Why JavaScript-heavy sites index poorly, how Google and Yandex render JS, SSR/SSG/CSR differences, and a fix checklist.

·13 min read·Site Metrics Tool

Modern React, Vue, Angular and other SPA framework sites look great but often have serious SEO issues. Engines fetch the HTML, see a near-empty `<body>` and think "no content here". The fact that JavaScript paints the entire page after load can be invisible to engines. This article walks through how Google and Yandex handle JavaScript in 2026, what fundamentally separates SSR, SSG and CSR, and the checklist to use when a SPA site won't index.

How Google renders JavaScript

Google uses two-stage indexing for JavaScript pages. Stage 1 — crawl: Googlebot fetches the HTML and indexes what's in it. If HTML is just an empty `<div id="root"></div>` and `<script>` — Google indexes it as an empty page. Stage 2 — render: the page goes into a render queue where headless Chromium executes the JavaScript and sees the final DOM. Now Google sees content. The problem: stage 1 to stage 2 can take anywhere from hours to weeks. During that time your page sits empty in the index. If render fails (JS error, timeout, blocked resource) — stage 2 doesn't happen at all.

How Yandex renders JavaScript

Yandex lags Google in JavaScript rendering. Until 2023 Yandex barely rendered JS — only basic HTML got indexed. Since 2024 the situation improved but not radically: Yandex renders JavaScript for roughly 60% of pages in queue vs ~95% in Google, with bigger latency. Practical takeaway: if you target the Russian market and run a SPA, indexation pain in Yandex will be sharper than in Google. The fix is the same: SSR.

SSR vs SSG vs CSR: SEO differences

CSR (Client-Side Rendering) — classic SPA: the server returns empty HTML, JS fills it in the browser. The SEO disaster above. SSR (Server-Side Rendering) — the server renders full-content HTML per request, JavaScript adds interactivity later. The engine gets full content immediately. Ideal for SEO. Implemented via Next.js, Nuxt, SvelteKit and other meta-frameworks. SSG (Static Site Generation) — HTML is generated at build time, the server serves pre-built static files. Fastest option, great for SEO, but unsuitable for dynamic content (like a user dashboard). Hybrid SSR+SSG (e.g., Next.js App Router with different strategies per page) is the modern optimum. Site Metrics Tool itself runs on Next.js 16 with a hybrid SSR+SSG strategy, and indexation is excellent because of it.

How to check whether engines see your content

Test 1 — disable JavaScript in your browser (Chrome DevTools → ⚙ → Disable JavaScript), reload. If you see only an empty template, a placeholder or "Loading..." — engines see the same. Test 2 — GSC → URL Inspection → Test Live URL → View Rendered HTML. Google shows what it sees after rendering. No content = render issue on Google's side. Test 3 — `curl -A "Yandexbot" https://your-site.com/page` — what the server returns to Yandex's bot. Empty HTML = nothing for Yandex to index. These three tests in 5 minutes tell you whether you have a JavaScript SEO problem.

Fix checklist

Frequently asked

Do React apps index well?

Depends on the rendering. React itself is neither good nor bad for SEO — what matters is how you use it. React + SSR (via Next.js) indexes great. React + pure CSR (Create React App without extras) — poorly.

Can I make Google render my site faster?

GSC → URL Inspection → Request Indexing speeds up INDEXING of a specific URL, but not RENDERING time. With CSR, changes still arrive with delay. Strategically the only fix is SSR.

Do prerender.io and similar help?

They help but it's a stopgap. Prerender generates HTML snapshots for bots via their service. Works but adds an external dependency, cost and failure point. Better to do proper SSR.

Share

Related articles

🧱
Sep 4, 2026 · 14 min read

Schema.org markup: the advanced 2026 guide

A complete guide to structured data: every type for every page, JSON-LD vs Microdata, @id linking, testing and debugging.

🌐
Aug 19, 2026 · 13 min read

Hreflang for multilingual sites: the complete 2026 guide

What hreflang is, how to set it up correctly for two or more languages, typical mistakes, and why Google and Yandex treat hreflang differently.

👯
Jul 30, 2026 · 13 min read

Duplicate pages: how to find and fix them in 30 minutes

A complete guide to finding and fixing duplicates: types, detection tools, fixes via canonical, 301 and noindex.

🦈
Jul 14, 2026 · 13 min read

Keyword cannibalization: how to find and fix it

What keyword cannibalization is, why it kills rankings, how to detect it via GSC and Webmaster, and three proven strategies to fix it.