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

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：

// nuxt.config.tsexportdefaultdefineNuxtConfig({// 默认就是 SSRssr:true})

useFetch获取的数据会被缓存：

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

三、全局关闭 SSR

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

exportdefaultdefineNuxtConfig({ssr:false// 变成 SPA})

适用场景：

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

四、页面级渲染控制

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

<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（后台管理）

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

五、混合渲染（Hybrid Rendering）

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

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

ISR（增量静态生成）

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

ISR 触发更新的方式：

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

六、预渲染

构建时生成静态页面：

exportdefaultdefineNuxtConfig({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，首字节时间

九、动态切换

根据请求特征动态选择：

// server/middleware/dynamic-render.tsexportdefaultdefineEventHandler((event)=>{constua=getHeader(event,'user-agent')||''// 爬虫用 SSRif(/bot|spider/i.test(ua)){event.context.ssr=true}// 已登录用户用 CSRconsttoken=getCookie(event,'token')if(token){event.context.ssr=false}})

十、部署选择

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

十一、调试技巧

查看当前渲染模式：

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

检查缓存状态：

// 查看 Nitro 缓存conststorage=useStorage()constcached=awaitstorage.getItem('nitro:routes:/blog')

总结

渲染模式选择指南：

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

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

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

相关文章

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

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

延伸阅读

nuxt4完整系列，持续更新中。。，欢迎来逛逛

---

内容有帮助？点赞、收藏、关注三连！评论区等你 💪