What are rendering modes in Nuxt (SSR, SSG, SPA, Hybrid)?

Nuxt.js provides multiple rendering strategies to match your application's needs.

1. Server-Side Rendering (SSR)

Default mode - renders pages on the server for each request.

javascript

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

Pros:

Better SEO
Faster initial page load
Dynamic content
Real-time data

Cons:

Server costs
Slower time to interactive
Complex caching

Use when:

SEO is critical
Content changes frequently
Real-time data needed

2. Static Site Generation (SSG)

Pre-renders all pages at build time.

javascript

// Generate static files
npx nuxi generate

// Or in config
export default defineNuxtConfig({
  ssr: true,
  nitro: {
    static: true
  }
});

Pros:

Extremely fast
Low server costs (CDN only)
Better security
Offline support

Cons:

Build time increases with pages
Not good for dynamic content
Requires rebuild for updates

Use when:

Content rarely changes
Have limited pages
Want maximum performance
Blog, documentation, marketing sites

3. Single Page Application (SPA)

Client-side rendering only.

javascript

export default defineNuxtConfig({
  ssr: false
});

Pros:

Simpler deployment
Lower server costs
Rich interactions
No server needed

Cons:

Poor SEO
Slower initial load
JavaScript required
No progressive enhancement

Use when:

SEO not important
Internal tools/dashboards
Behind authentication
Client-side heavy apps

4. Hybrid Rendering (ISR/ISG)

Mix rendering strategies per route.

javascript

// pages/index.vue
export default defineNuxtComponent({
  async asyncData() {
    // This page uses SSR
  }
});

// pages/blog/[slug].vue
export default defineNuxtComponent({
  async asyncData() {
    return {
      // Static generation with revalidation
    };
  }
});

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }, // SSG
    '/admin/**': { ssr: false }, // SPA
    '/api/**': { cors: true },
    '/blog/**': { swr: 3600 }, // ISR: revalidate every hour
  }
});

Incremental Static Regeneration (ISR)

Update static pages without full rebuild.

javascript

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': {
      swr: 60 * 60, // Cache for 1 hour
      isr: true
    }
  }
});

Comparison Table

Feature	SSR	SSG	SPA	Hybrid
SEO	✅ Excellent	✅ Excellent	❌ Poor	✅ Excellent
Speed	🟡 Good	✅ Fastest	🟡 Good	✅ Best
Cost	❌ High	✅ Low	✅ Low	🟡 Medium
Dynamic	✅ Yes	❌ No	✅ Yes	✅ Yes
Build Time	✅ Fast	❌ Slow	✅ Fast	🟡 Medium

Real-World Example

javascript

// E-commerce site
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }, // Static homepage
    '/products': { swr: 600 }, // ISR product list (10 min cache)
    '/products/**': { swr: 3600 }, // ISR product pages (1 hour)
    '/cart': { ssr: false }, // SPA cart
    '/checkout': { ssr: true }, // SSR checkout (SEO + security)
    '/admin/**': { ssr: false }, // SPA admin panel
    '/api/**': { cors: true }
  }
});

Interview Tips

Q: How to choose rendering mode? A: Consider SEO needs, content update frequency, and performance requirements.

Q: Can you mix modes in one Nuxt app? A: Yes! Use routeRules for per-route rendering strategy.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems