Nuxt SSR, SSG, and SPA Modes — Choosing the Right Rendering Strategy

In this tutorial, you will learn about Nuxt SSR, SSG, and SPA Modes. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Nuxt 3 rendering modes: SSR, SSG, SPA, and hybrid — when to use each and how to configure them per route for optimal performance.

In this lesson, you'll understand the four rendering modes in Nuxt 3 and how to choose the right one for each page.

What You'll Learn

The differences between SSR, SSG, SPA, and hybrid modes, how to configure each mode, and when to use each approach.

Why It Matters

Choosing the right rendering mode affects performance, SEO, hosting requirements, and user experience. The wrong choice can hurt both speed and rankings.

flowchart TD
    A[Rendering Modes] --> B[SSR - Server]
    A --> C[SSG - Static]
    A --> D[SPA - Client]
    A --> E[Hybrid - Per Route]
    B --> F[Real-time Data]
    C --> G[Content Sites]
    D --> H[Dashboards]
    E --> I[Best of All]
    style A fill:#00dc82,color:#fff

SSR (Server-Side Rendering)

Default mode — pages render on each request:

// nuxt.config.ts — default SSR
export default defineNuxtConfig({
  ssr: true  // Default
});

<script setup>
// Data fetched on every request
const { data } = await useFetch('/api/user-profile');
</script>

Best for: pages with user-specific data, real-time content, authenticated sections.

SSG (Static Site Generation)

Pre-render pages at build time:

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/', '/about', '/blog'],
      crawlLinks: true
    }
  }
});

npm run generate

Best for: blogs, documentation, marketing sites — content that doesn't change per user.

SPA (Single Page Application)

Client-side rendering only:

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false  // Fully client-side
});

Best for: internal tools, admin dashboards, authenticated apps where SEO isn't important.

Hybrid Mode

Per-route rendering strategy:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Static — pre-rendered at build time
    '/': { prerender: true },
    '/blog/**': { prerender: true },
    
    // Server-side — fresh data per request
    '/dashboard': { ssr: true },
    '/account/**': { ssr: true },
    
    // Client-only — no server, no prerender
    '/admin/**': { ssr: false },
    
    // API — server endpoints
    '/api/**': { ssr: true },
    
    // Redirects
    '/old-page': { redirect: '/new-page' },
    
    // Netlify-specific: ISR-like
    '/products/**': { isr: true }
  }
});

Comparison Table

Choosing the Right Mode

<script setup>
// Use SSR for user-specific pages
definePageMeta({
  title: 'Dashboard'
});
// Data is fresh per request with SSR

// Use SSG for content pages
definePageMeta({
  title: 'Documentation'
});
// Data is pre-rendered at build time

// Use SPA for admin panels
definePageMeta({
  title: 'Admin'
});
// Client-side only, no SSR overhead
</script>

Common Mistakes

1. Using SSR for everything: SSR adds server costs and latency. Use SSG for content pages when possible.
2. Using SPA for public content: SPAs have poor SEO because search engines may not execute JavaScript properly.
3. Not using hybrid mode: Most sites benefit from a mix. Don't choose one mode for the entire site.
4. Forgetting ISR support varies: ISR (Incremental Static Regeneration) depends on your hosting provider. Check compatibility.
5. Not testing rendering modes: Verify each page renders correctly in its chosen mode during development.

Practice Questions

1. What is the default rendering mode in Nuxt 3? Answer: SSR (server-side rendering). Pages are rendered on each request by default.

2. Which mode provides the best SEO? Answer: SSR and SSG both provide excellent SEO because HTML is fully rendered before reaching search engines.

3. When would you use ssr: false? Answer: For authenticated admin panels, internal dashboards, or apps where SEO doesn't matter and you want to reduce server load.

4. What does hybrid mode mean in Nuxt 3? Answer: Different pages use different rendering strategies via routeRules. Each route can be SSR, SSG, or SPA.

Challenge

Build a multi-section site with: SSG for public content (home, blog), SSR for user dashboard (personalized data), SPA for admin panel (no SEO needed), and API routes for data. Verify each section renders correctly.

Mini Project

Audit an existing Nuxt site and classify each route into: SSG (content), SSR (dynamic), SPA (authenticated), or API. Implement the optimal rendering strategy for each route type. Measure performance improvement.

FAQ

What's Next

Learn about Nuxt Image Optimization to optimize images in your Nuxt application with @nuxt/image.