JavaScript SEO: Framework-Specific Optimization for React, Vue, and Angular

Quick Summary

- What this covers: Technical guide to JavaScript SEO for modern frameworks. Learn rendering strategies, indexation solutions, and performance optimization for React, Vue, and Angular.

- Who it's for: SEO practitioners at every career stage

- Key takeaway: Read the first section for the core framework, then use the specific tactics that match your situation.

JavaScript frameworks—React, Vue, Angular, Next.js, Nuxt, SvelteKit—power modern web applications but introduce SEO challenges. Client-side rendering delays content availability to crawlers, dynamic routing confuses indexation, and heavy JavaScript bundles slow page speed. Sites built with these frameworks often suffer from poor organic visibility despite having valuable content.

This guide provides framework-specific solutions to make JavaScript-powered sites crawlable, indexable, and performant.

The Core Problem: Client-Side Rendering

Traditional HTML sites send fully-rendered content to browsers. Client-side rendering (CSR) sends minimal HTML and relies on JavaScript to build the page after it loads. Search engine crawlers historically struggled with CSR because they executed JavaScript inconsistently.

Googlebot now renders JavaScript, but with limitations: Rendering queue delays: Googlebot indexes the initial HTML immediately but queues JavaScript rendering for later—sometimes days later. This delays indexation of dynamically generated content. Rendering budget constraints: Google allocates limited resources to rendering JavaScript. Complex apps with heavy JavaScript bundles may not render fully. Crawl inefficiency: Googlebot must execute JavaScript for every page, consuming more crawl budget than static HTML sites. Other search engines lag: Bing, Yandex, Baidu, and DuckDuckGo render JavaScript less reliably than Google. Sites relying on CSR lose visibility in these engines.

Rendering Strategies Compared

Four primary rendering strategies exist for JavaScript frameworks, each with distinct SEO implications.

Client-Side Rendering (CSR)

How it works: Server sends minimal HTML shell. JavaScript executes in the browser to fetch data and render content. SEO impact:

• Slowest time-to-content for crawlers
• Requires JavaScript execution for indexation
• High risk of indexation delays or failures
• Poor Core Web Vitals (slow LCP, high CLS)

When to use: Internal dashboards, authenticated apps, tools where SEO doesn't matter. Avoid for: Public content sites, e-commerce, blogs, marketing sites.

Server-Side Rendering (SSR)

How it works: Server generates fully-rendered HTML for each request. JavaScript hydrates the page in the browser to enable interactivity. SEO impact:

• Crawlers receive fully-rendered HTML immediately
• Fast time-to-content, improves LCP
• No rendering delays or JavaScript dependency
• Higher server costs (rendering on every request)

When to use: Content-heavy sites, e-commerce, news sites, marketing pages. Frameworks supporting SSR: Next.js (React), Nuxt (Vue), Angular Universal (Angular), SvelteKit (Svelte).

Static Site Generation (SSG)

How it works: Site pre-renders all pages to static HTML at build time. Server serves static files without per-request rendering. SEO impact:

• Fastest delivery—static HTML served instantly
• Zero JavaScript dependency for crawlers
• Best Core Web Vitals performance
• Requires rebuild for content updates

When to use: Blogs, documentation sites, marketing sites with infrequent updates, landing pages. Frameworks supporting SSG: Next.js, Nuxt, Gatsby, SvelteKit, Astro.

Incremental Static Regeneration (ISR)

How it works: Pre-renders pages at build time but regenerates them in the background at defined intervals. Combines SSG speed with dynamic data. SEO impact:

• Fast initial load like SSG
• Content stays fresh without full rebuilds
• Crawlers receive static HTML immediately
• Complex caching logic required

When to use: E-commerce product pages, content sites with frequent updates, news sites. Frameworks supporting ISR: Next.js, Nuxt (via revalidate options).

Framework-Specific Recommendations

React (Create React App, Vite)

Default setup: Pure CSR. Bad for SEO. Solution: Migrate to Next.js for SSR or SSG. Next.js is the industry-standard React framework for SEO-optimized React apps. Next.js rendering options:

• getServerSideProps: SSR for dynamic content (user-specific pages, real-time data)
• getStaticProps: SSG for static content (blog posts, product pages)
• revalidate in getStaticProps: ISR for frequently updated content

Implementation:

// SSG with ISR
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 3600, // Regenerate every hour
  };
}

// SSR export async function getServerSideProps(context) {   const data = await fetchUserData(context.req);   return { props: { data } }; }

Key optimizations:

• Use next/image for automatic image optimization
• Enable next/script with strategy="lazyOnload" for third-party scripts
• Split code with dynamic imports to reduce bundle size
• Implement next-sitemap for automatic XML sitemap generation

Vue (Vue CLI, Vite)

Default setup: CSR. Bad for SEO. Solution: Migrate to Nuxt for SSR or SSG. Nuxt is Vue's equivalent to Next.js. Nuxt rendering modes:

• ssr: true: SSR for all pages
• target: 'static': SSG for static content
• routeRules with swr: ISR-like behavior

Implementation:

// nuxt.config.js
export default {
  ssr: true,
  target: 'static',
  routeRules: {
    '/blog/**': { swr: 3600 }, // Revalidate blog pages hourly
  },
}

Key optimizations:

• Use NuxtImg component for automatic image optimization
• Enable @nuxtjs/sitemap module for XML sitemaps
• Implement useSeoMeta composable for meta tag management
• Lazy-load components with defineAsyncComponent

Angular

Default setup: CSR. Bad for SEO. Solution: Implement Angular Universal for SSR. Angular Universal setup:

ng add @nguniversal/express-engine

This configures server-side rendering with an Express.js server.

Key optimizations:

• Use TransferState API to avoid duplicate HTTP requests on client hydration
• Implement lazy loading for feature modules
• Enable prerender: true in angular.json for SSG of static routes
• Use Angular's built-in image directive for automatic optimization

Prerendering static routes:

// angular.json
"prerender": {
  "builder": "@nguniversal/builders:prerender",
  "options": {
    "routes": ["/", "/about", "/contact"]
  }
}

Next.js

Default setup: Supports SSR, SSG, and ISR out of the box. Good for SEO if configured properly. Best practices:

• Use SSG (getStaticProps) for content that updates infrequently
• Use ISR (revalidate) for content that updates hourly/daily
• Use SSR (getServerSideProps) only for user-specific or real-time data
• Avoid CSR for public-facing content pages

Rendering decision tree:

• Static content (about, landing pages) → SSG
• Blog posts, product pages → SSG + ISR
• Search results, user dashboards → SSR
• Interactive tools, calculators → CSR

Nuxt

Default setup: Supports SSR and SSG. Good for SEO if configured properly. Best practices:

• Set ssr: true for server-side rendering
• Use target: 'static' for static site generation
• Implement route-specific caching with routeRules
• Enable @nuxtjs/sitemap and @nuxtjs/robots modules

Route-specific rendering:

// nuxt.config.js
export default {
  routeRules: {
    '/': { prerender: true }, // SSG for homepage
    '/blog/**': { swr: 3600 }, // ISR for blog posts
    '/api/**': { ssr: false }, // Skip SSR for API routes
  },
}

Technical SEO Considerations for JavaScript Sites

Indexation and Rendering

Verify Googlebot rendering: Use Google Search Console's URL Inspection tool to see how Googlebot renders your pages. Compare the rendered HTML to what you see in DevTools. Check for rendering errors: Open the JavaScript console in Search Console's rendering preview. Fix any errors that prevent content from loading. Monitor indexation: Track indexed pages in Search Console. Slow indexation growth signals rendering issues.

Dynamic Routing and URLs

JavaScript frameworks often use client-side routing, which can confuse crawlers if implemented incorrectly.

Use real URLs, not hash fragments: Avoid example.com/#/products. Use example.com/products. Hash fragments aren't recognized as separate pages. Implement pushState routing: Modern frameworks support HTML5 History API routing by default. Verify your router uses pushState, not hash-based routing. Ensure server handles routes: For SSR/SSG, configure your server to handle all routes. A request to example.com/products should return the rendered product page, not a 404.

Meta Tags and Open Graph

JavaScript frameworks dynamically inject meta tags, which can cause issues if rendered too late.

Server-side meta tags: Use SSR/SSG to render meta tags on the server. Googlebot reads server-rendered meta tags reliably. Framework-specific solutions:

• Next.js: Use next/head component or generateMetadata in App Router
• Nuxt: Use useHead composable or head option
• Angular: Use Meta and Title services from @angular/platform-browser

Example (Next.js):

import Head from 'next/head';

export default function Page({ data }) {   return (     <>       <Head>         <title>{data.title}</title>         <meta name="description" content={data.description} />         <meta property="og:title" content={data.title} />       </Head>       <main>{data.content}</main>     </>   ); }

Structured Data (Schema.org)

Search engines use structured data to understand page content and generate rich results. JavaScript frameworks must inject structured data server-side.

JSON-LD format: Use JSON-LD in a