Technical SEO · July 18, 2026 · 7 min read
JavaScript Frameworks Ranked for SEO: React, Vue, Svelte, and Astro Head-to-Head
Compare React, Vue, Svelte, and Astro on JavaScript frameworks SEO: crawlability, hydration cost, and Core Web Vitals out of the box.
By FluxWriter Team
Choosing the right JavaScript framework affects more than developer experience — it directly shapes how search engines crawl, render, and rank your pages. When you stack up the top contenders on JavaScript frameworks SEO metrics, the differences are stark: default crawlability, hydration cost, and Core Web Vitals scores vary dramatically out of the box, before you write a single line of optimization code. This article scores React, Vue, Svelte, and Astro across those three dimensions so you can make the call based on data, not hype.
The Three Axes That Matter for SEO
Before the framework comparisons, here's what each metric actually measures:
Default crawlability — What does Googlebot see on a cold fetch with JavaScript disabled? Some frameworks ship meaningful HTML; others ship an empty <div id="root">. Google's crawler can execute JavaScript, but it queues JS rendering separately, which delays indexing.
Hydration cost — How much JavaScript must the browser parse and execute before the page is interactive? Heavier hydration means more time-to-interactive (TTI), which tanks First Input Delay (FID) and Interaction to Next Paint (INP) scores.
CWV out of the box — With zero manual optimization, what's the typical Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) for a starter project deployed to a standard CDN?
React: Powerful, But SEO is Optional by Default
A vanilla Create React App project ships a near-empty HTML document. Googlebot gets:
<div id="root"></div>
That's it. Google will eventually render the page via its secondary indexing wave, but "eventually" can mean days or weeks, and featured snippets and rich results almost never surface from client-rendered content.
Hydration cost is the real problem. A default CRA bundle lands around 140–180 KB of gzipped JavaScript. That entire bundle must parse and execute before hydration completes. On a mid-range Android device on 4G, TTI routinely exceeds 5 seconds on a modest React app.
Next.js rescues React's SEO story through Server-Side Rendering (SSR) or Static Site Generation (SSG), but that's an explicit architectural choice you have to make — it's not the default. React 18's Server Components shift some of this burden server-side, but adoption is still uneven and requires a supporting framework.
React SEO score (default, no meta-framework):
| Metric | Score |
|---|---|
| Default crawlability | 2/10 |
| Hydration cost | 4/10 |
| CWV out of the box | 4/10 |
With Next.js (SSR/SSG), crawlability jumps to 9/10 — but you're now maintaining a meta-framework, not just React.
Vue: Marginally Better Defaults, Same Core Problem
Vue 3 with Vite shares the same fundamental issue: the default scaffold is a client-side-only SPA. A <div id="app"> greets crawlers unless you layer on Nuxt.
The one edge Vue has over React in the default SPA configuration is bundle size. A bare-bones Vue 3 app compiles to roughly 50–60 KB gzipped — about a third of a comparable React app. That smaller payload means faster parse time and a lower hydration cost, which shows up in TTI and INP numbers.
Nuxt 3 with Universal rendering gives Vue a genuine SSR story, including automatic <head> management via useHead() and route-based code splitting that keeps per-page payloads lean. Still an opt-in, not a default.
Vue SEO score (default, no meta-framework):
| Metric | Score |
|---|---|
| Default crawlability | 2/10 |
| Hydration cost | 6/10 |
| CWV out of the box | 6/10 |
Vue's smaller runtime gives it a meaningful CWV edge over React in SPA mode, but it's still shipping an empty shell to crawlers.
Svelte: Compiler Advantage, No Virtual DOM Tax
Svelte takes a fundamentally different approach — it compiles components to imperative JavaScript at build time rather than shipping a runtime. There's no Virtual DOM diffing overhead; the output is lean, direct DOM manipulation code.
A default SvelteKit project ships roughly 20–30 KB of gzipped JavaScript for a simple page. More importantly, SvelteKit defaults to SSR. A fresh npm create svelte@latest project, deployed without changing a single setting, renders full HTML server-side. Googlebot gets actual content on the first fetch.
CWV Numbers in Practice
A SvelteKit blog deployed to Vercel or Cloudflare Pages with no manual performance tuning typically scores:
- LCP: 1.2–1.8s (well within the "good" threshold of 2.5s)
- CLS: 0.01–0.04 (well under 0.1)
- INP: 60–80ms (comfortably under 200ms)
These aren't hand-tuned benchmarks — they're what you get before you touch svelte.config.js. That's the meaningful distinction: SvelteKit's ceiling is achievable without expertise.
Svelte/SvelteKit SEO score (default):
| Metric | Score |
|---|---|
| Default crawlability | 8/10 |
| Hydration cost | 9/10 |
| CWV out of the box | 8/10 |
The caveat: SvelteKit's ecosystem is smaller. If you need a specific third-party component library or tight CMS integration, you may be building it yourself.
Astro: The Purpose-Built SEO Champion
Astro was designed from day one with content-heavy, SEO-critical sites in mind. Its core feature — Islands Architecture — ships zero JavaScript by default. Every component renders to static HTML unless you explicitly add client:load, client:visible, or another hydration directive.
A default Astro project with a blog template delivers:
- Zero KB of JavaScript unless a component opts in
- Server-rendered HTML on every route by default
- Built-in
<head>management with the<SEO>community integration - Automatic sitemap generation via
@astrojs/sitemap
The Islands Architecture Advantage
Consider a product page with a static hero, static copy, and one interactive pricing calculator. In React, the entire page hydrates — including the hero and copy that never change. In Astro:
<!-- Static, ships no JS -->
<HeroSection />
<ProductCopy />
<!-- Only this component hydrates -->
<PricingCalculator client:visible />
Googlebot indexes the full HTML content immediately. The pricing calculator gets its JavaScript only when a user scrolls it into view. This is partial hydration done correctly.
Astro SEO score (default):
| Metric | Score |
|---|---|
| Default crawlability | 10/10 |
| Hydration cost | 10/10 |
| CWV out of the box | 9/10 |
The one caveat: highly interactive applications (real-time dashboards, complex SPAs) are not Astro's target. For those, Svelte or Vue with SSR is the better fit.
Head-to-Head Summary
| Framework | Crawlability | Hydration Cost | CWV (default) | Best For |
|---|---|---|---|---|
| React (CRA) | 2/10 | 4/10 | 4/10 | Apps with Next.js added |
| Vue (Vite SPA) | 2/10 | 6/10 | 6/10 | Apps with Nuxt added |
| SvelteKit | 8/10 | 9/10 | 8/10 | Content + interactive apps |
| Astro | 10/10 | 10/10 | 9/10 | Content-heavy, SEO-critical sites |
When React and Vue Still Win
This comparison isn't a case against React or Vue. Both are the correct choice when:
- You're building a web application (SaaS dashboard, internal tool) where SEO isn't a priority
- Your team already has deep React or Vue expertise and you'll add Next.js or Nuxt
- You need a rich ecosystem of third-party UI libraries and integrations
The trap is defaulting to React or Vue for a marketing site, blog, or documentation site. For those use cases, you're borrowing against your SEO budget by default.
FAQ
Does Google really penalize client-side rendering?
Not explicitly, but client-rendered pages enter Google's indexing queue at a lower priority than server-rendered HTML. Google confirmed in 2019 that JavaScript rendering happens in a "second wave" that can lag the initial crawl by hours to weeks. During that lag, your content isn't indexed. For competitive keywords, that delay has measurable ranking impact.
Can I fix React's SEO problems without switching frameworks?
Yes. Next.js with getStaticProps or generateStaticParams (App Router) gives you full SSG/SSR control. You can also add react-snap or prerender.io for a lighter lift, but those are band-aids with edge cases. The real fix is SSR or SSG at the framework level, which effectively means Next.js.
How does hydration cost affect rankings specifically?
Google uses Core Web Vitals as a ranking signal via the Page Experience update. INP (Interaction to Next Paint) replaced FID as a CWV metric in March 2024 and is particularly sensitive to JavaScript-heavy hydration — every event listener attached during hydration adds latency. High hydration cost = poor INP = weaker Page Experience signal.
The Practical Takeaway
If you're starting a content site, documentation hub, or marketing site today, Astro is the default-best choice for JavaScript frameworks SEO — you get full crawlability and minimal hydration overhead with zero configuration. For apps that need significant interactivity alongside content, SvelteKit is the closest second. React and Vue remain excellent for application development, but they need a meta-framework layer before they're SEO-competitive.
If you're producing content at scale and want your technical SEO to work without manual intervention at every article, tools like FluxWriter can handle the writing pipeline so you're not hand-crafting posts for a framework that would have buried them in a rendering queue anyway.