Server-Side Rendering vs Static Generation: Making the Right Choice

The Rendering Spectrum

It's not SSR vs SSG — it's a spectrum. Modern frameworks like Nuxt let you mix strategies per route.

Static Site Generation (SSG)

Best for: Blogs, documentation, marketing pages

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { prerender: true },
    '/docs/**': { prerender: true },
  },
})

Pros:

• Instant TTFB (served from CDN)
• Zero server cost at runtime
• Maximum reliability

Cons:

• Rebuild required for content changes
• Not suitable for personalized content
• Build times grow with page count

Server-Side Rendering (SSR)

Best for: Dashboards, e-commerce, social feeds

export default defineNuxtConfig({
  routeRules: {
    '/dashboard/**': { ssr: true },
    '/feed': { ssr: true },
  },
})

Pros:

• Always fresh data
• Personalized content per request
• Good SEO without hydration issues

Cons:

• Server cost scales with traffic
• Slower TTFB than cached static pages
• Server required (can't deploy to pure CDN)

Incremental Static Regeneration (ISR)

Best for: Content that changes occasionally

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { isr: 3600 }, // Revalidate every hour
    '/products/**': { isr: 60 }, // Revalidate every minute
  },
})

Decision Framework

Ask yourself:

1. Does this page need real-time data? → SSR
2. Does this page change less than hourly? → ISR
3. Does this page change only at deploy time? → SSG
4. Does this page need user-specific content? → SSR or client-side

My Recommendation

For most projects: SSG for marketing + ISR for content + SSR for authenticated pages. Nuxt makes this trivial with route rules.