SSR vs SSG in Nuxt 4: Choose the Best Strategy

One of the most important decisions when building an application with Nuxt 4 is choosing the rendering strategy. Nuxt offers multiple options: Server-Side Rendering (SSR), Static Site Generation (SSG), Client-Side Rendering (CSR), and even Hybrid Rendering. Understanding the differences and when to use each one is key to your project's success.

Fundamental Concepts

Server-Side Rendering (SSR)

In SSR, each user request is processed by the server, which generates the complete HTML before sending it to the browser. The client then "hydrates" the page to make it interactive.

User → Requests page → Server generates HTML → Sends to browser → Hydration → Interactive

Advantages:

Excellent SEO (content is immediately available)
Better perceived load time (fast First Contentful Paint)
Always up-to-date content
Ideal for dynamic and personalized content

Disadvantages:

Requires an active Node.js server
Higher infrastructure cost
Greater Time to Interactive (TTI)
Server load on every request

Static Site Generation (SSG)

In SSG, all pages are pre-generated during build time. The result is a set of static HTML files served from a CDN.

Build time: Generate HTML for each route → Static files
Runtime: User → CDN serves static HTML → Hydration → Interactive

Advantages:

Exceptional performance (served from CDN)
Minimal hosting cost
No Node.js server needed
Maximum security (no exposed server)

Disadvantages:

Static content until next build
Long build times with many pages
Not ideal for frequently updated content
No per-user personalization in initial HTML

Configuration in Nuxt 4

SSR (Default)

SSR is enabled by default. No additional configuration needed:

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

To build and run:

npm run build
node .output/server/index.mjs

SSG

To generate a static site:

npx nuxi generate
# Static files will be in .output/public/

CSR (Client-Side Only)

If you do not need SSR or SSG:

export default defineNuxtConfig({
  ssr: false
})

Hybrid Rendering: The Best of Both Worlds

Nuxt 4 allows mixing rendering strategies per route using routeRules. This is one of the most powerful features of the framework:

export default defineNuxtConfig({
  routeRules: {
    // SSG: Pre-rendered during build
    '/': { prerender: true },
    '/about': { prerender: true },

    // SSR: Rendered on every request
    '/dashboard/**': { ssr: true },

    // SWR: Stale-While-Revalidate
    '/blog/**': { swr: 3600 }, // Cache for 1 hour

    // ISR: Incremental Static Regeneration
    '/products/**': { isr: 600 }, // Regenerate every 10 minutes

    // CSR: Client-side only
    '/admin/**': { ssr: false },

    // Static cache with CDN
    '/api/public/**': {
      cache: {
        maxAge: 86400 // 24 hours
      }
    }
  }
})

Stale-While-Revalidate (SWR)

SWR serves the cached version while revalidating in the background:

routeRules: {
  '/blog/**': {
    swr: 3600
  }
}

Flow:

1. First visit: SSR generates the page and caches it

2. Subsequent visits: Serves the cached version

3. After cache time: Serves cached version while regenerating in background

4. Next visit: Serves the updated version

ISR (Incremental Static Regeneration)

Similar to SWR, but the page regenerates after a fixed time:

routeRules: {
  '/products/**': {
    isr: 600 // Regenerate every 10 minutes
  }
}

Performance Comparison

| Metric | SSR | SSG | CSR | SWR/ISR |

|---|---|---|---|---|

When to Use Each Strategy?

Use SSR when:

Your content changes frequently
You need per-user personalization (dashboard, profile)
You handle sensitive data that should not be cached
Your SEO depends on dynamic content

Use SSG when:

Your content rarely changes
You have a finite number of pages
You need maximum performance
You want to minimize hosting costs

Use SWR/ISR when:

Your content updates periodically
You can tolerate slightly outdated data
You have many pages with dynamic content (blog, e-commerce)

Use CSR when:

The page does not need SEO (admin panels)
All content requires authentication
Interactivity is more important than initial load time

SEO Optimizations by Strategy

SSR and SSG

Both are excellent for SEO. Use useSeoMeta to define meta tags:

const { data: post } = await useFetch(`/api/posts/${route.params.slug}`)

useSeoMeta({
  title: post.value.title,
  description: post.value.excerpt,
  ogTitle: post.value.title,
  ogDescription: post.value.excerpt,
  ogImage: post.value.image,
  twitterCard: 'summary_large_image'
})

CSR

For CSR routes, consider using static meta tags:

useHead({
  title: 'Admin Panel',
  meta: [
    { name: 'robots', content: 'noindex, nofollow' }
  ]
})

Hosting Considerations

| Strategy | Compatible Hosting |

|---|---|

| SSR | Node.js server, Vercel, Netlify, AWS Lambda |

| SSG | Any static hosting, CDN, GitHub Pages |

| CSR | Any static hosting |

| Hybrid | Vercel, Netlify, Cloudflare Workers |

Deploy on Vercel (Hybrid)

export default defineNuxtConfig({
  nitro: {
    preset: 'vercel'
  }
})

Static Deploy (SSG)

export default defineNuxtConfig({
  nitro: {
    preset: 'static'
  }
})

Conclusion

There is no universally correct rendering strategy. The beauty of Nuxt 4 is that you do not have to choose just one: with Hybrid Rendering you can combine SSR, SSG, CSR, SWR, and ISR in the same application. Analyze the needs of each section of your app and assign the strategy that best fits. Start with SSR as your base and optimize specific routes with routeRules.