Nuxt 3 进阶 - SSR 与 SSG 深度解析

Nuxt 3 代表了 Vue 生态中全栈框架的最高水准。其全新的 Nitro 引擎统一了服务端和构建时的渲染逻辑，让 SSR、SSG、ISR 的切换变得前所未有地简单。

三种渲染模式的本质差异

理解 Nitro 的工作机制，首先需要明确三种渲染模式在请求生命周期上的不同：

<script setup lang="ts">
import { useAsyncData, useFetch, definePageMeta } from '#app'

definePageMeta({
  name: 'products-id',
  path: '/products/:id',
  middleware: ['auth'],
  layout: 'shop'
})

const route = useRoute()
const { data: product, pending, refresh, error } = await useAsyncData(
  `product-${route.params.id}`,
  () => $fetch(`/api/products/${route.params.id}`),
  {
    server: true,
    lazy: false,
    default: () => ({}),
    transform: (res) => ({
      ...res,
      formattedPrice: new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY'
      }).format(res.price)
    })
  }
)

const { data: related } = await useFetch(
  '/api/products/related',
  {
    params: { id: route.params.id, limit: 4 },
    pick: ['items']
  }
)

useHead({
  title: () => product.value?.name,
  meta: [
    { name: 'description', content: () => product.value?.description }
  ]
})

const isrTimestamp = ref(Date.now())
</script>

<template>
  <div class="product-page">
    <Suspense>
      <template #default>
        <ProductDetail v-if="product" :product="product" />
        <div v-else-if="error" class="error">{{ error.message }}</div>
      </template>
      <template #fallback>
        <ProductSkeleton />
      </template>
    </Suspense>
    <RelatedProducts v-if="related" :items="related.items" />
  </div>
</template>

性能与成本对比

渲染模式	首屏 TTFB	可交互时间 TTI	服务器成本	SEO 友好	适用场景
SSR	⚡ 300-600ms	✅ 优秀	💸 高	✅ 最佳	个性化、实时数据
SSG	⚡⚡⚡ <50ms	✅ 最佳	🆓 极低	✅ 最佳	文档、博客、产品页
ISR	⚡⚡ <100ms*	✅ 优秀	💰 中	✅ 良好	电商、新闻、中低频更新
CSR (SPA)	🐢 200ms + JS	❌ 较差	🆓 极低	⚠️ 需额外处理	Dashboard、后台管理

*首次访问后命中缓存的情况

缓存策略配置

Nitro 提供了多层缓存机制。对于 SSR 页面，可以通过 routeRules 配置 CDN 级缓存：

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/products/**': { swr: 3600 },
    '/api/**': { swr: 60, cache: { maxItems: 1000 } },
    '/static/**': { static: true }
  }
})