进阶篇二 Nuxt4 渲染模式：SSR/SSG/CSR 怎么选

文章目录

- 一、四种渲染模式
- - [1. SSR（服务端渲染）](#1. SSR（服务端渲染）)
  - [2. SSG（静态生成）](#2. SSG（静态生成）)
  - [3. CSR（客户端渲染）](#3. CSR（客户端渲染）)
  - [4. SWR（增量静态生成）](#4. SWR（增量静态生成）)
- [二、Nuxt 默认模式](#二、Nuxt 默认模式)
- [三、全局关闭 SSR](#三、全局关闭 SSR)
- 四、页面级渲染控制
- [五、混合渲染（Hybrid Rendering）](#五、混合渲染（Hybrid Rendering）)
- - ISR（增量静态生成）
- 六、预渲染
- 七、按场景选择
- 八、性能对比
- 九、动态切换
- 十、部署选择
- 十一、调试技巧
- 总结

个人网站
Nuxt 4 支持多种渲染模式：SSR、SSG、CSR、混合渲染......每种模式都有适用场景。选对了事半功倍，选错了后患无穷。今天来分析各种渲染模式的特点和使用场景。

一、四种渲染模式

1. SSR（服务端渲染）

复制代码

用户请求 → 服务器渲染 HTML → 返回完整页面

特点：

每次请求都在服务器渲染
首屏快、SEO 好
服务器压力大

适用：动态内容、个性化页面

2. SSG（静态生成）

复制代码

构建时 → 生成静态 HTML → 部署到 CDN
用户请求 → CDN 直接返回

特点：

构建时生成，请求时直接返回
极快（CDN 边缘缓存）
内容更新需要重新构建

适用：博客、文档、营销页

3. CSR（客户端渲染）

复制代码

用户请求 → 返回空 HTML → JS 渲染

特点：

服务器压力小
首屏慢、SEO 差
适合交互复杂的应用

适用：后台管理、工具应用

4. SWR（增量静态生成）

复制代码

首次请求 → 返回缓存
同时 → 后台更新缓存
下次请求 → 返回新数据

特点：

结合 SSR 和 SSG 的优点
响应快 + 数据新鲜
Nuxt 默认支持

二、Nuxt 默认模式

Nuxt 默认是 SSR + SWR：

ts 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  // 默认就是 SSR
  ssr: true
})

useFetch 获取的数据会被缓存：

vue 复制代码

<script setup lang="ts">
// 首次请求：服务器获取
// 后续请求：使用缓存
const { data } = await useFetch('/api/articles')
</script>

三、全局关闭 SSR

如果不需要 SSR，可以全局关闭：

ts 复制代码

export default defineNuxtConfig({
  ssr: false  // 变成 SPA
})

适用场景：

后台管理系统
登录后才能访问的应用
不需要 SEO 的工具应用

四、页面级渲染控制

Nuxt 支持页面级别控制渲染模式：

vue 复制代码

<script setup lang="ts">
// 这个页面只用 CSR
definePageMeta({
  ssr: false
})
</script>

典型场景：后台管理 + 营销页面混合

复制代码

pages/
├── index.vue        # SSR（首页，需要 SEO）
├── about.vue        # SSR（关于页，需要 SEO）
└── admin/
    ├── index.vue    # CSR（后台管理）
    └── users.vue    # CSR（后台管理）

vue 复制代码

<!-- pages/admin/index.vue -->
<script setup lang="ts">
definePageMeta({
  ssr: false,
  layout: 'admin'
})
</script>

五、混合渲染（Hybrid Rendering）

Nuxt 4 的 Nitro 支持路由级别的渲染规则：

ts 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 首页：静态生成，每小时更新
    '/': { isr: 3600 },
    
    // 博客文章：静态生成
    '/blog/**': { isr: true },
    
    // API：不缓存
    '/api/**': { cache: false },
    
    // 管理后台：SPA
    '/admin/**': { ssr: false },
    
    // 旧页面重定向
    '/old-page': { redirect: '/new-page' }
  }
})

ISR（增量静态生成）

ts 复制代码

routeRules: {
  '/blog/**': { isr: true }    // 永久缓存，直到手动清除
  '/blog/**': { isr: 3600 }    // 缓存 1 小时
  '/blog/**': { isr: false }   // 禁用 ISR
}

ISR 触发更新的方式：

ts 复制代码

// 清除缓存，触发重新生成
await $fetch('/api/__nuxt_isr__/blog/my-article')

六、预渲染

构建时生成静态页面：

ts 复制代码

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/', '/about', '/contact'],
      crawlLinks: true  // 自动发现链接
    }
  }
})

适合：

内容固定的页面
需要极致性能的场景
部署到静态托管

七、按场景选择

场景	推荐模式	配置
企业官网	SSG	`routeRules: { '/**': { isr: true } }`
博客	SSG + ISR	`routeRules: { '/blog/**': { isr: 3600 } }`
电商首页	SSR + 缓存	默认 SSR，短期缓存
商品详情	ISR	缓存 + 库存实时查询
后台管理	CSR	`ssr: false`
用户中心	CSR	`ssr: false`
搜索结果	SSR	每次请求渲染

八、性能对比

以博客为例：

模式	TTFB	服务器压力	更新延迟
SSR	200ms	高	无
SSG	10ms	无	需重新部署
ISR	10ms	低	可控
CSR	500ms+	低	无

TTFB：Time To First Byte，首字节时间

九、动态切换

根据请求特征动态选择：

ts 复制代码

// server/middleware/dynamic-render.ts
export default defineEventHandler((event) => {
  const ua = getHeader(event, 'user-agent') || ''
  
  // 爬虫用 SSR
  if (/bot|spider/i.test(ua)) {
    event.context.ssr = true
  }
  
  // 已登录用户用 CSR
  const token = getCookie(event, 'token')
  if (token) {
    event.context.ssr = false
  }
})

十、部署选择

渲染模式	部署方式
SSR	Node.js 服务器
SSG	静态托管（Vercel、Netlify、OSS）
CSR	静态托管
ISR	Node.js 服务器 + 缓存
混合	Edge 函数 + 静态托管

十一、调试技巧

查看当前渲染模式：

vue 复制代码

<script setup lang="ts">
onMounted(() => {
  console.log('渲染模式:', useNuxtApp().ssrContext ? 'SSR' : 'CSR')
})
</script>

检查缓存状态：

ts 复制代码

// 查看 Nitro 缓存
const storage = useStorage()
const cached = await storage.getItem('nitro:routes:/blog')

总结

渲染模式选择指南：

需求	选择
SEO + 动态内容	SSR
SEO + 静态内容	SSG/ISR
无 SEO + 交互多	CSR
性能 + 实时	ISR
混合需求	混合渲染

记住：没有银弹，按需选择。大多数项目用 SSR + ISR 就够了。

下一篇聊聊 Nitro 引擎，了解 Nuxt 服务端的核心技术。

入门篇三：Nuxt4组件自动导入：写代码少敲一半字

入门篇二：Nuxt 4路由自动生成：告别手动配置路由的日子