文章目录一、四种渲染模式1. SSR服务端渲染2. SSG静态生成3. CSR客户端渲染4. SWR增量静态生成二、Nuxt 默认模式三、全局关闭 SSR四、页面级渲染控制五、混合渲染Hybrid RenderingISR增量静态生成六、预渲染七、按场景选择八、性能对比九、动态切换十、部署选择十一、调试技巧总结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 langts // 首次请求服务器获取 // 后续请求使用缓存 const { data } await useFetch(/api/articles) /script三、全局关闭 SSR如果不需要 SSR可以全局关闭exportdefaultdefineNuxtConfig({ssr:false// 变成 SPA})适用场景后台管理系统登录后才能访问的应用不需要 SEO 的工具应用四、页面级渲染控制Nuxt 支持页面级别控制渲染模式script setup langts // 这个页面只用 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 langts definePageMeta({ ssr: false, layout: admin }) /script五、混合渲染Hybrid RenderingNuxt 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// 自动发现链接}}})适合内容固定的页面需要极致性能的场景部署到静态托管七、按场景选择场景推荐模式配置企业官网SSGrouteRules: { /**: { isr: true } }博客SSG ISRrouteRules: { /blog/**: { isr: 3600 } }电商首页SSR 缓存默认 SSR短期缓存商品详情ISR缓存 库存实时查询后台管理CSRssr: false用户中心CSRssr: false搜索结果SSR每次请求渲染八、性能对比以博客为例模式TTFB服务器压力更新延迟SSR200ms高无SSG10ms无需重新部署ISR10ms低可控CSR500ms低无TTFBTime To First Byte首字节时间九、动态切换根据请求特征动态选择// server/middleware/dynamic-render.tsexportdefaultdefineEventHandler((event){constuagetHeader(event,user-agent)||// 爬虫用 SSRif(/bot|spider/i.test(ua)){event.context.ssrtrue}// 已登录用户用 CSRconsttokengetCookie(event,token)if(token){event.context.ssrfalse}})十、部署选择渲染模式部署方式SSRNode.js 服务器SSG静态托管Vercel、Netlify、OSSCSR静态托管ISRNode.js 服务器 缓存混合Edge 函数 静态托管十一、调试技巧查看当前渲染模式script setup langts onMounted(() { console.log(渲染模式:, useNuxtApp().ssrContext ? SSR : CSR) }) /script检查缓存状态// 查看 Nitro 缓存conststorageuseStorage()constcachedawaitstorage.getItem(nitro:routes:/blog)总结渲染模式选择指南需求选择SEO 动态内容SSRSEO 静态内容SSG/ISR无 SEO 交互多CSR性能 实时ISR混合需求混合渲染记住没有银弹按需选择。大多数项目用 SSR ISR 就够了。下一篇聊聊 Nitro 引擎了解 Nuxt 服务端的核心技术。相关文章入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子延伸阅读nuxt4完整系列持续更新中。。欢迎来逛逛内容有帮助点赞、收藏、关注三连评论区等你