[{"data":1,"prerenderedAt":3219},["ShallowReactive",2],{"article-/topics/nuxt/nuxt-auth-solution-comparison":3,"related-nuxt":516,"content-query-f2I5xWM3qw":2829},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":23,"_type":510,"_id":511,"_source":512,"_file":513,"_stem":514,"_extension":515},"/topics/nuxt/nuxt-auth-solution-comparison","nuxt",false,"","Nuxt Auth 认证方案对比：从 Session 到 Token 的选型与边界判断","Nuxt 项目的认证方案并不只有“接一个登录模块”这么简单。本文从 SSR、Cookie、Token、BFF 与第三方服务集成出发，系统比较 Nuxt Auth 常见方案的优缺点与适用场景。","2026-04-23","HTMLPAGE 团队",[13,14,15,16,17],"Nuxt","Authentication","SSR","Session","Token","/images/topics/nuxt/nuxt-auth-solution-comparison.jpg","login authentication security developer laptop interface",8247921,"https://www.pexels.com/photo/laptop-screen-in-close-up-shot-8247921/",15,{"type":24,"children":25,"toc":497},"root",[26,34,59,64,69,75,80,103,108,114,119,124,142,147,165,170,183,189,194,199,217,222,228,233,238,261,266,284,289,294,299,304,317,322,328,333,356,361,367,372,390,395,413,418,423,451,456,461,466],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","Nuxt 项目一涉及登录认证，团队很快就会进入一个高频分歧：",{"type":27,"tag":35,"props":36,"children":37},"ul",{},[38,44,49,54],{"type":27,"tag":39,"props":40,"children":41},"li",{},[42],{"type":32,"value":43},"是不是直接用 JWT",{"type":27,"tag":39,"props":45,"children":46},{},[47],{"type":32,"value":48},"Cookie 和 Session 会不会更稳",{"type":27,"tag":39,"props":50,"children":51},{},[52],{"type":32,"value":53},"要不要走 BFF",{"type":27,"tag":39,"props":55,"children":56},{},[57],{"type":32,"value":58},"SSR 页面和客户端状态怎么统一",{"type":27,"tag":28,"props":60,"children":61},{},[62],{"type":32,"value":63},"这些问题之所以经常争不出结果，不是因为谁懂得更多，而是因为认证方案本来就和渲染模式、部署形态、接口边界强相关。",{"type":27,"tag":28,"props":65,"children":66},{},[67],{"type":32,"value":68},"Nuxt Auth 的难点，不是“怎么登录”，而是怎么让认证状态在 SSR、CSR、接口请求和权限控制之间保持一致。",{"type":27,"tag":70,"props":71,"children":73},"h2",{"id":72},"先把认证问题拆成四个层次",[74],{"type":32,"value":72},{"type":27,"tag":28,"props":76,"children":77},{},[78],{"type":32,"value":79},"Nuxt 项目里的认证，通常至少涉及四层：",{"type":27,"tag":35,"props":81,"children":82},{},[83,88,93,98],{"type":27,"tag":39,"props":84,"children":85},{},[86],{"type":32,"value":87},"身份证明：用户如何登录并证明自己是谁",{"type":27,"tag":39,"props":89,"children":90},{},[91],{"type":32,"value":92},"会话存储：凭证放在 Cookie、Session、Token 还是混合模式",{"type":27,"tag":39,"props":94,"children":95},{},[96],{"type":32,"value":97},"页面守卫：哪些路由、哪些数据请求需要权限控制",{"type":27,"tag":39,"props":99,"children":100},{},[101],{"type":32,"value":102},"服务端代理：前端如何安全地与后端 API 交互",{"type":27,"tag":28,"props":104,"children":105},{},[106],{"type":32,"value":107},"如果这四层没有拆开讨论，团队很容易把“凭证格式”误当成整个认证方案。",{"type":27,"tag":70,"props":109,"children":111},{"id":110},"session-httponly-cookie-通常是内容型与-ssr-站点的稳妥解",[112],{"type":32,"value":113},"Session + HttpOnly Cookie 通常是内容型与 SSR 站点的稳妥解",{"type":27,"tag":28,"props":115,"children":116},{},[117],{"type":32,"value":118},"对大量 Nuxt 项目来说，Session 或服务端签发的 HttpOnly Cookie 仍然是最稳的选择。",{"type":27,"tag":28,"props":120,"children":121},{},[122],{"type":32,"value":123},"原因很直接：",{"type":27,"tag":35,"props":125,"children":126},{},[127,132,137],{"type":27,"tag":39,"props":128,"children":129},{},[130],{"type":32,"value":131},"SSR 阶段服务端天然能拿到 Cookie",{"type":27,"tag":39,"props":133,"children":134},{},[135],{"type":32,"value":136},"不需要把敏感 Token 暴露给浏览器 JS",{"type":27,"tag":39,"props":138,"children":139},{},[140],{"type":32,"value":141},"路由守卫与服务端请求更容易统一",{"type":27,"tag":28,"props":143,"children":144},{},[145],{"type":32,"value":146},"这种模式特别适合：",{"type":27,"tag":35,"props":148,"children":149},{},[150,155,160],{"type":27,"tag":39,"props":151,"children":152},{},[153],{"type":32,"value":154},"内容平台后台",{"type":27,"tag":39,"props":156,"children":157},{},[158],{"type":32,"value":159},"SaaS 管理端",{"type":27,"tag":39,"props":161,"children":162},{},[163],{"type":32,"value":164},"带用户资料页和权限页的 SSR 站点",{"type":27,"tag":28,"props":166,"children":167},{},[168],{"type":32,"value":169},"缺点也很明确：",{"type":27,"tag":35,"props":171,"children":172},{},[173,178],{"type":27,"tag":39,"props":174,"children":175},{},[176],{"type":32,"value":177},"跨域和子域场景配置更复杂",{"type":27,"tag":39,"props":179,"children":180},{},[181],{"type":32,"value":182},"需要更认真地处理 CSRF、防重放和会话刷新",{"type":27,"tag":70,"props":184,"children":186},{"id":185},"纯前端-token-模式更灵活但-ssr-一致性更难",[187],{"type":32,"value":188},"纯前端 Token 模式更灵活，但 SSR 一致性更难",{"type":27,"tag":28,"props":190,"children":191},{},[192],{"type":32,"value":193},"不少团队会选择 access token + refresh token，因为它和 API 网关、移动端、多客户端共用更方便。",{"type":27,"tag":28,"props":195,"children":196},{},[197],{"type":32,"value":198},"但放到 Nuxt 场景，问题很快出现：",{"type":27,"tag":35,"props":200,"children":201},{},[202,207,212],{"type":27,"tag":39,"props":203,"children":204},{},[205],{"type":32,"value":206},"SSR 时 token 从哪里拿",{"type":27,"tag":39,"props":208,"children":209},{},[210],{"type":32,"value":211},"首屏渲染前怎么知道用户是否登录",{"type":27,"tag":39,"props":213,"children":214},{},[215],{"type":32,"value":216},"刷新 token 时客户端和服务端怎么保持一致",{"type":27,"tag":28,"props":218,"children":219},{},[220],{"type":32,"value":221},"如果团队没有做 BFF 或服务端代理层，纯前端 token 模式在 Nuxt SSR 下往往会引入更多状态同步问题。",{"type":27,"tag":70,"props":223,"children":225},{"id":224},"bff-模式最适合复杂权限和多后端系统",[226],{"type":32,"value":227},"BFF 模式最适合复杂权限和多后端系统",{"type":27,"tag":28,"props":229,"children":230},{},[231],{"type":32,"value":232},"当 Nuxt 不再只是前端站点，而是承担中间层职责时，BFF 往往是更稳的做法。",{"type":27,"tag":28,"props":234,"children":235},{},[236],{"type":32,"value":237},"典型场景包括：",{"type":27,"tag":35,"props":239,"children":240},{},[241,246,251,256],{"type":27,"tag":39,"props":242,"children":243},{},[244],{"type":32,"value":245},"后端服务较多",{"type":27,"tag":39,"props":247,"children":248},{},[249],{"type":32,"value":250},"权限判断逻辑复杂",{"type":27,"tag":39,"props":252,"children":253},{},[254],{"type":32,"value":255},"需要聚合多个 API 返回给页面",{"type":27,"tag":39,"props":257,"children":258},{},[259],{"type":32,"value":260},"希望浏览器永远不直接接触核心服务 token",{"type":27,"tag":28,"props":262,"children":263},{},[264],{"type":32,"value":265},"在这种模式下，Nuxt server routes 或 Nitro API 可以作为认证中枢：",{"type":27,"tag":35,"props":267,"children":268},{},[269,274,279],{"type":27,"tag":39,"props":270,"children":271},{},[272],{"type":32,"value":273},"浏览器只持有受控 Cookie",{"type":27,"tag":39,"props":275,"children":276},{},[277],{"type":32,"value":278},"服务端负责调用上游 API",{"type":27,"tag":39,"props":280,"children":281},{},[282],{"type":32,"value":283},"权限、续期和错误处理都在服务端统一治理",{"type":27,"tag":28,"props":285,"children":286},{},[287],{"type":32,"value":288},"这会提高服务端复杂度，但能明显换来更强的一致性与可控性。",{"type":27,"tag":70,"props":290,"children":292},{"id":291},"路由守卫和数据守卫不要混为一谈",[293],{"type":32,"value":291},{"type":27,"tag":28,"props":295,"children":296},{},[297],{"type":32,"value":298},"Nuxt 认证里另一个高频误区，是把页面可访问和数据可访问混成一个问题。",{"type":27,"tag":28,"props":300,"children":301},{},[302],{"type":32,"value":303},"实际上应分两层处理：",{"type":27,"tag":35,"props":305,"children":306},{},[307,312],{"type":27,"tag":39,"props":308,"children":309},{},[310],{"type":32,"value":311},"路由守卫：决定页面能不能进",{"type":27,"tag":39,"props":313,"children":314},{},[315],{"type":32,"value":316},"数据守卫：决定进来之后能拿到什么数据",{"type":27,"tag":28,"props":318,"children":319},{},[320],{"type":32,"value":321},"如果只做页面跳转拦截，而不限制 server routes 或后端接口，认证系统仍然是不完整的。",{"type":27,"tag":70,"props":323,"children":325},{"id":324},"第三方认证服务不是接进来就完了",[326],{"type":32,"value":327},"第三方认证服务不是“接进来就完了”",{"type":27,"tag":28,"props":329,"children":330},{},[331],{"type":32,"value":332},"Auth0、Clerk、Supabase Auth、NextAuth 类服务能显著降低接入成本，但它们并不会自动帮你解决：",{"type":27,"tag":35,"props":334,"children":335},{},[336,341,346,351],{"type":27,"tag":39,"props":337,"children":338},{},[339],{"type":32,"value":340},"SSR 状态同步",{"type":27,"tag":39,"props":342,"children":343},{},[344],{"type":32,"value":345},"业务权限模型",{"type":27,"tag":39,"props":347,"children":348},{},[349],{"type":32,"value":350},"多租户隔离",{"type":27,"tag":39,"props":352,"children":353},{},[354],{"type":32,"value":355},"自定义登录链路",{"type":27,"tag":28,"props":357,"children":358},{},[359],{"type":32,"value":360},"所以第三方服务更适合解决身份认证本身，不适合直接替代整个权限体系设计。",{"type":27,"tag":70,"props":362,"children":364},{"id":363},"一个常见失败案例客户端看起来已登录ssr-却仍然渲染访客态",[365],{"type":32,"value":366},"一个常见失败案例：客户端看起来已登录，SSR 却仍然渲染访客态",{"type":27,"tag":28,"props":368,"children":369},{},[370],{"type":32,"value":371},"这种问题在 Nuxt 里非常常见。根因通常是：",{"type":27,"tag":35,"props":373,"children":374},{},[375,380,385],{"type":27,"tag":39,"props":376,"children":377},{},[378],{"type":32,"value":379},"token 只存在 localStorage",{"type":27,"tag":39,"props":381,"children":382},{},[383],{"type":32,"value":384},"SSR 阶段拿不到认证信息",{"type":27,"tag":39,"props":386,"children":387},{},[388],{"type":32,"value":389},"页面首次渲染和 hydration 后状态不一致",{"type":27,"tag":28,"props":391,"children":392},{},[393],{"type":32,"value":394},"结果就是：",{"type":27,"tag":35,"props":396,"children":397},{},[398,403,408],{"type":27,"tag":39,"props":399,"children":400},{},[401],{"type":32,"value":402},"首屏闪烁",{"type":27,"tag":39,"props":404,"children":405},{},[406],{"type":32,"value":407},"SEO 页面错误暴露",{"type":27,"tag":39,"props":409,"children":410},{},[411],{"type":32,"value":412},"权限页面出现错误内容",{"type":27,"tag":28,"props":414,"children":415},{},[416],{"type":32,"value":417},"这类问题通常不是 guard 写错，而是方案本身就没有为 SSR 一致性设计。",{"type":27,"tag":70,"props":419,"children":421},{"id":420},"一份可直接复用的检查清单",[422],{"type":32,"value":420},{"type":27,"tag":35,"props":424,"children":425},{},[426,431,436,441,446],{"type":27,"tag":39,"props":427,"children":428},{},[429],{"type":32,"value":430},"是否先拆清了身份、会话、守卫、服务端代理四层问题",{"type":27,"tag":39,"props":432,"children":433},{},[434],{"type":32,"value":435},"SSR 项目是否优先考虑了 Cookie / Session 一致性",{"type":27,"tag":39,"props":437,"children":438},{},[439],{"type":32,"value":440},"复杂 API 场景是否评估了 BFF 方案",{"type":27,"tag":39,"props":442,"children":443},{},[444],{"type":32,"value":445},"路由守卫与数据守卫是否分别设计",{"type":27,"tag":39,"props":447,"children":448},{},[449],{"type":32,"value":450},"第三方认证接入后是否补齐了权限与多租户边界",{"type":27,"tag":70,"props":452,"children":454},{"id":453},"总结",[455],{"type":32,"value":453},{"type":27,"tag":28,"props":457,"children":458},{},[459],{"type":32,"value":460},"Nuxt Auth 方案没有绝对标准答案，关键在于它能否同时满足 SSR 一致性、接口安全和业务权限控制。只要先把会话模型、服务端代理与守卫层分开设计，认证系统就不会在项目变复杂后迅速失控。",{"type":27,"tag":28,"props":462,"children":463},{},[464],{"type":32,"value":465},"进一步阅读：",{"type":27,"tag":35,"props":467,"children":468},{},[469,479,488],{"type":27,"tag":39,"props":470,"children":471},{},[472],{"type":27,"tag":473,"props":474,"children":476},"a",{"href":475},"/topics/nuxt/nuxt-edge-rendering-practice",[477],{"type":32,"value":478},"Nuxt 边缘渲染实践",{"type":27,"tag":39,"props":480,"children":481},{},[482],{"type":27,"tag":473,"props":483,"children":485},{"href":484},"/topics/nuxt/nuxt-prisma-database-integration",[486],{"type":32,"value":487},"Nuxt + Prisma 数据库集成",{"type":27,"tag":39,"props":489,"children":490},{},[491],{"type":27,"tag":473,"props":492,"children":494},{"href":493},"/topics/nuxt/nuxt-runtime-config-management",[495],{"type":32,"value":496},"Nuxt 运行时配置管理",{"title":7,"searchDepth":498,"depth":498,"links":499},3,[500,502,503,504,505,506,507,508,509],{"id":72,"depth":501,"text":72},2,{"id":110,"depth":501,"text":113},{"id":185,"depth":501,"text":188},{"id":224,"depth":501,"text":227},{"id":291,"depth":501,"text":291},{"id":324,"depth":501,"text":327},{"id":363,"depth":501,"text":366},{"id":420,"depth":501,"text":420},{"id":453,"depth":501,"text":453},"markdown","content:topics:nuxt:nuxt-auth-solution-comparison.md","content","topics/nuxt/nuxt-auth-solution-comparison.md","topics/nuxt/nuxt-auth-solution-comparison","md",[517,1504,2288],{"_path":518,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":519,"description":520,"date":521,"topic":5,"author":11,"tags":522,"image":527,"featured":528,"readingTime":529,"body":530,"_type":510,"_id":1501,"_source":512,"_file":1502,"_stem":1503,"_extension":515},"/topics/nuxt/nitro-engine-deep-dive","Nitro 引擎深度剖析","讲透 Nuxt/Nitro 的运行时模型、路由与中间件、存储层与缓存、部署适配与性能调优，帮助你把服务端能力当成可控的工程系统。","2026-01-20",[13,523,15,524,525,526],"Nitro","Serverless","Edge","缓存","/images/topics/nuxt/nitro.jpg",true,21,{"type":24,"children":531,"toc":1469},[532,537,550,555,614,619,624,628,634,639,663,668,686,689,695,700,723,728,731,753,765,783,794,807,813,836,839,845,850,881,886,899,902,908,920,933,938,956,961,974,977,983,988,1006,1012,1031,1037,1042,1047,1076,1079,1085,1090,1108,1113,1131,1137,1150,1156,1169,1175,1188,1193,1206,1209,1215,1221,1234,1240,1253,1259,1272,1275,1281,1286,1309,1314,1327,1330,1336,1341,1399,1404,1422,1425,1429,1441,1446],{"type":27,"tag":70,"props":533,"children":535},{"id":534},"nitro-引擎深度剖析",[536],{"type":32,"value":519},{"type":27,"tag":28,"props":538,"children":539},{},[540,542,548],{"type":32,"value":541},"在 Nuxt 3/4 的体系里，Nitro 不是“一个服务器”，而是一套",{"type":27,"tag":543,"props":544,"children":545},"strong",{},[546],{"type":32,"value":547},"可移植的服务端运行时与构建产物规范",{"type":32,"value":549},"。",{"type":27,"tag":28,"props":551,"children":552},{},[553],{"type":32,"value":554},"它把你在开发时写的：",{"type":27,"tag":35,"props":556,"children":557},{},[558,570,581,592,603],{"type":27,"tag":39,"props":559,"children":560},{},[561,568],{"type":27,"tag":562,"props":563,"children":565},"code",{"className":564},[],[566],{"type":32,"value":567},"server/api/*",{"type":32,"value":569},"（API 路由）",{"type":27,"tag":39,"props":571,"children":572},{},[573,579],{"type":27,"tag":562,"props":574,"children":576},{"className":575},[],[577],{"type":32,"value":578},"server/routes/*",{"type":32,"value":580},"（更底层路由）",{"type":27,"tag":39,"props":582,"children":583},{},[584,590],{"type":27,"tag":562,"props":585,"children":587},{"className":586},[],[588],{"type":32,"value":589},"server/middleware/*",{"type":32,"value":591},"（中间件）",{"type":27,"tag":39,"props":593,"children":594},{},[595,601],{"type":27,"tag":562,"props":596,"children":598},{"className":597},[],[599],{"type":32,"value":600},"server/plugins/*",{"type":32,"value":602},"（启动插件）",{"type":27,"tag":39,"props":604,"children":605},{},[606,612],{"type":27,"tag":562,"props":607,"children":609},{"className":608},[],[610],{"type":32,"value":611},"storage",{"type":32,"value":613},"（KV/文件/内存等存储抽象）",{"type":27,"tag":28,"props":615,"children":616},{},[617],{"type":32,"value":618},"统一编译成一个可以部署到多种环境的产物：Node Server、Serverless、Edge（取决于适配器与能力集）。",{"type":27,"tag":28,"props":620,"children":621},{},[622],{"type":32,"value":623},"这篇文章按“你要在生产上稳定运行”的视角，拆解 Nitro 的关键构件，并给出性能与可观测性落地建议。",{"type":27,"tag":625,"props":626,"children":627},"hr",{},[],{"type":27,"tag":70,"props":629,"children":631},{"id":630},"_1-nitro-的定位从-nuxt-ssr-到通用服务端运行时",[632],{"type":32,"value":633},"1. Nitro 的定位：从 Nuxt SSR 到“通用服务端运行时”",{"type":27,"tag":28,"props":635,"children":636},{},[637],{"type":32,"value":638},"Nitro 解决两类问题：",{"type":27,"tag":640,"props":641,"children":642},"ol",{},[643,653],{"type":27,"tag":39,"props":644,"children":645},{},[646,651],{"type":27,"tag":543,"props":647,"children":648},{},[649],{"type":32,"value":650},"运行时统一",{"type":32,"value":652},"：开发/生产环境一致的请求处理模型",{"type":27,"tag":39,"props":654,"children":655},{},[656,661],{"type":27,"tag":543,"props":657,"children":658},{},[659],{"type":32,"value":660},"部署可移植",{"type":32,"value":662},"：同一套代码可输出到不同部署目标",{"type":27,"tag":28,"props":664,"children":665},{},[666],{"type":32,"value":667},"你可以把 Nitro 看作 Nuxt 的“服务端内核”，而 Nuxt 只是围绕它提供：",{"type":27,"tag":35,"props":669,"children":670},{},[671,676,681],{"type":27,"tag":39,"props":672,"children":673},{},[674],{"type":32,"value":675},"视图渲染（SSR/RSC 相关能力）",{"type":27,"tag":39,"props":677,"children":678},{},[679],{"type":32,"value":680},"资源构建（Vite/Webpack）",{"type":27,"tag":39,"props":682,"children":683},{},[684],{"type":32,"value":685},"路由与数据获取的上层抽象",{"type":27,"tag":625,"props":687,"children":688},{},[],{"type":27,"tag":70,"props":690,"children":692},{"id":691},"_2-请求生命周期一次请求在-nitro-里怎么走",[693],{"type":32,"value":694},"2. 请求生命周期：一次请求在 Nitro 里怎么走？",{"type":27,"tag":28,"props":696,"children":697},{},[698],{"type":32,"value":699},"简化后的请求链路：",{"type":27,"tag":640,"props":701,"children":702},{},[703,708,713,718],{"type":27,"tag":39,"props":704,"children":705},{},[706],{"type":32,"value":707},"入口适配器接收请求（Node/Serverless/Edge）",{"type":27,"tag":39,"props":709,"children":710},{},[711],{"type":32,"value":712},"进入 Nitro 的 H3 请求处理器（统一事件模型）",{"type":27,"tag":39,"props":714,"children":715},{},[716],{"type":32,"value":717},"依次执行：中间件 → 路由匹配 → handler",{"type":27,"tag":39,"props":719,"children":720},{},[721],{"type":32,"value":722},"写回响应（含 headers、缓存策略、流式输出等）",{"type":27,"tag":28,"props":724,"children":725},{},[726],{"type":32,"value":727},"关键点：Nitro 用统一的事件对象承载请求上下文，这让你在不同部署目标下写出的 server 代码保持一致。",{"type":27,"tag":625,"props":729,"children":730},{},[],{"type":27,"tag":70,"props":732,"children":734},{"id":733},"_3-路由系统serverapi-与-serverroutes-的区别",[735,737,743,745,751],{"type":32,"value":736},"3. 路由系统：",{"type":27,"tag":562,"props":738,"children":740},{"className":739},[],[741],{"type":32,"value":742},"server/api",{"type":32,"value":744}," 与 ",{"type":27,"tag":562,"props":746,"children":748},{"className":747},[],[749],{"type":32,"value":750},"server/routes",{"type":32,"value":752}," 的区别",{"type":27,"tag":754,"props":755,"children":757},"h3",{"id":756},"_31-serverapi",[758,760],{"type":32,"value":759},"3.1 ",{"type":27,"tag":562,"props":761,"children":763},{"className":762},[],[764],{"type":32,"value":567},{"type":27,"tag":35,"props":766,"children":767},{},[768,773,778],{"type":27,"tag":39,"props":769,"children":770},{},[771],{"type":32,"value":772},"面向 API 的约定式目录",{"type":27,"tag":39,"props":774,"children":775},{},[776],{"type":32,"value":777},"通常返回 JSON",{"type":27,"tag":39,"props":779,"children":780},{},[781],{"type":32,"value":782},"与 Nuxt 的开发体验高度整合",{"type":27,"tag":754,"props":784,"children":786},{"id":785},"_32-serverroutes",[787,789],{"type":32,"value":788},"3.2 ",{"type":27,"tag":562,"props":790,"children":792},{"className":791},[],[793],{"type":32,"value":578},{"type":27,"tag":35,"props":795,"children":796},{},[797,802],{"type":27,"tag":39,"props":798,"children":799},{},[800],{"type":32,"value":801},"更底层，更贴近“HTTP 路由”",{"type":27,"tag":39,"props":803,"children":804},{},[805],{"type":32,"value":806},"更适合做：Webhook、回调、代理、特殊 content-type",{"type":27,"tag":754,"props":808,"children":810},{"id":809},"_33-实践建议",[811],{"type":32,"value":812},"3.3 实践建议",{"type":27,"tag":35,"props":814,"children":815},{},[816,826],{"type":27,"tag":39,"props":817,"children":818},{},[819,821],{"type":32,"value":820},"普通业务 API：优先 ",{"type":27,"tag":562,"props":822,"children":824},{"className":823},[],[825],{"type":32,"value":742},{"type":27,"tag":39,"props":827,"children":828},{},[829,831],{"type":32,"value":830},"需要更强控制（stream、代理、非 JSON）：用 ",{"type":27,"tag":562,"props":832,"children":834},{"className":833},[],[835],{"type":32,"value":750},{"type":27,"tag":625,"props":837,"children":838},{},[],{"type":27,"tag":70,"props":840,"children":842},{"id":841},"_4-中间件全局逻辑的正确放置",[843],{"type":32,"value":844},"4. 中间件：全局逻辑的正确放置",{"type":27,"tag":28,"props":846,"children":847},{},[848],{"type":32,"value":849},"Nitro 中的中间件通常用于：",{"type":27,"tag":35,"props":851,"children":852},{},[853,858,871,876],{"type":27,"tag":39,"props":854,"children":855},{},[856],{"type":32,"value":857},"鉴权/鉴别请求来源",{"type":27,"tag":39,"props":859,"children":860},{},[861,863,869],{"type":32,"value":862},"注入 ",{"type":27,"tag":562,"props":864,"children":866},{"className":865},[],[867],{"type":32,"value":868},"requestId",{"type":32,"value":870},"、trace 信息",{"type":27,"tag":39,"props":872,"children":873},{},[874],{"type":32,"value":875},"统一错误处理与日志",{"type":27,"tag":39,"props":877,"children":878},{},[879],{"type":32,"value":880},"基础安全 headers",{"type":27,"tag":28,"props":882,"children":883},{},[884],{"type":32,"value":885},"一个推荐的中间件职责边界：",{"type":27,"tag":35,"props":887,"children":888},{},[889,894],{"type":27,"tag":39,"props":890,"children":891},{},[892],{"type":32,"value":893},"中间件只做“横切关注点”",{"type":27,"tag":39,"props":895,"children":896},{},[897],{"type":32,"value":898},"不做具体业务（避免耦合与隐式依赖）",{"type":27,"tag":625,"props":900,"children":901},{},[],{"type":27,"tag":70,"props":903,"children":905},{"id":904},"_5-storage-抽象让缓存与数据存取可替换",[906],{"type":32,"value":907},"5. Storage 抽象：让缓存与数据存取可替换",{"type":27,"tag":28,"props":909,"children":910},{},[911,913,918],{"type":32,"value":912},"Nitro 的一个被低估的能力是 ",{"type":27,"tag":562,"props":914,"children":916},{"className":915},[],[917],{"type":32,"value":611},{"type":32,"value":919},"：",{"type":27,"tag":35,"props":921,"children":922},{},[923,928],{"type":27,"tag":39,"props":924,"children":925},{},[926],{"type":32,"value":927},"提供 KV 风格 API",{"type":27,"tag":39,"props":929,"children":930},{},[931],{"type":32,"value":932},"可接入内存、文件、Redis 等（取决于配置与环境）",{"type":27,"tag":28,"props":934,"children":935},{},[936],{"type":32,"value":937},"你可以用它做：",{"type":27,"tag":35,"props":939,"children":940},{},[941,946,951],{"type":27,"tag":39,"props":942,"children":943},{},[944],{"type":32,"value":945},"缓存（页面片段、API 结果）",{"type":27,"tag":39,"props":947,"children":948},{},[949],{"type":32,"value":950},"限流计数器",{"type":27,"tag":39,"props":952,"children":953},{},[954],{"type":32,"value":955},"临时会话信息",{"type":27,"tag":28,"props":957,"children":958},{},[959],{"type":32,"value":960},"设计原则：",{"type":27,"tag":35,"props":962,"children":963},{},[964,969],{"type":27,"tag":39,"props":965,"children":966},{},[967],{"type":32,"value":968},"把 storage 当成“可失效缓存”，不要当主数据库",{"type":27,"tag":39,"props":970,"children":971},{},[972],{"type":32,"value":973},"明确 TTL 与清理策略",{"type":27,"tag":625,"props":975,"children":976},{},[],{"type":27,"tag":70,"props":978,"children":980},{"id":979},"_6-缓存策略把快变成可控的工程能力",[981],{"type":32,"value":982},"6. 缓存策略：把“快”变成可控的工程能力",{"type":27,"tag":28,"props":984,"children":985},{},[986],{"type":32,"value":987},"Nitro 里的缓存往往涉及三层：",{"type":27,"tag":640,"props":989,"children":990},{},[991,996,1001],{"type":27,"tag":39,"props":992,"children":993},{},[994],{"type":32,"value":995},"CDN 缓存（边缘）",{"type":27,"tag":39,"props":997,"children":998},{},[999],{"type":32,"value":1000},"Nitro 运行时缓存（storage）",{"type":27,"tag":39,"props":1002,"children":1003},{},[1004],{"type":32,"value":1005},"上游服务缓存（数据库/服务端）",{"type":27,"tag":754,"props":1007,"children":1009},{"id":1008},"_61-api-缓存的推荐做法",[1010],{"type":32,"value":1011},"6.1 API 缓存的推荐做法",{"type":27,"tag":35,"props":1013,"children":1014},{},[1015,1026],{"type":27,"tag":39,"props":1016,"children":1017},{},[1018,1020],{"type":32,"value":1019},"对“读多写少”的接口做 ",{"type":27,"tag":562,"props":1021,"children":1023},{"className":1022},[],[1024],{"type":32,"value":1025},"stale-while-revalidate",{"type":27,"tag":39,"props":1027,"children":1028},{},[1029],{"type":32,"value":1030},"缓存 key 必须包含：用户态/语言/地区/权限等关键维度",{"type":27,"tag":754,"props":1032,"children":1034},{"id":1033},"_62-不要缓存带用户身份的响应除非你非常确定",[1035],{"type":32,"value":1036},"6.2 不要缓存“带用户身份”的响应（除非你非常确定）",{"type":27,"tag":28,"props":1038,"children":1039},{},[1040],{"type":32,"value":1041},"最容易出事故的是把 A 用户的数据缓存给 B 用户。",{"type":27,"tag":28,"props":1043,"children":1044},{},[1045],{"type":32,"value":1046},"建议：",{"type":27,"tag":35,"props":1048,"children":1049},{},[1050,1055],{"type":27,"tag":39,"props":1051,"children":1052},{},[1053],{"type":32,"value":1054},"默认对用户态接口不缓存",{"type":27,"tag":39,"props":1056,"children":1057},{},[1058,1060,1066,1068,1074],{"type":32,"value":1059},"必须缓存时，key 中加入 ",{"type":27,"tag":562,"props":1061,"children":1063},{"className":1062},[],[1064],{"type":32,"value":1065},"userId",{"type":32,"value":1067}," 或 ",{"type":27,"tag":562,"props":1069,"children":1071},{"className":1070},[],[1072],{"type":32,"value":1073},"session",{"type":32,"value":1075}," 维度",{"type":27,"tag":625,"props":1077,"children":1078},{},[],{"type":27,"tag":70,"props":1080,"children":1082},{"id":1081},"_7-部署适配为什么同一套代码能跑在不同环境",[1083],{"type":32,"value":1084},"7. 部署适配：为什么同一套代码能跑在不同环境？",{"type":27,"tag":28,"props":1086,"children":1087},{},[1088],{"type":32,"value":1089},"Nitro 的部署产物通常包含：",{"type":27,"tag":35,"props":1091,"children":1092},{},[1093,1098,1103],{"type":27,"tag":39,"props":1094,"children":1095},{},[1096],{"type":32,"value":1097},"编译后的 server bundle",{"type":27,"tag":39,"props":1099,"children":1100},{},[1101],{"type":32,"value":1102},"路由清单与运行时配置",{"type":27,"tag":39,"props":1104,"children":1105},{},[1106],{"type":32,"value":1107},"静态资源与预渲染结果（如果启用）",{"type":27,"tag":28,"props":1109,"children":1110},{},[1111],{"type":32,"value":1112},"在不同目标下的差异主要在：",{"type":27,"tag":35,"props":1114,"children":1115},{},[1116,1121,1126],{"type":27,"tag":39,"props":1117,"children":1118},{},[1119],{"type":32,"value":1120},"运行时能力（Node API 是否可用）",{"type":27,"tag":39,"props":1122,"children":1123},{},[1124],{"type":32,"value":1125},"冷启动与并发模型",{"type":27,"tag":39,"props":1127,"children":1128},{},[1129],{"type":32,"value":1130},"文件系统是否可写",{"type":27,"tag":754,"props":1132,"children":1134},{"id":1133},"_71-node-server",[1135],{"type":32,"value":1136},"7.1 Node Server",{"type":27,"tag":35,"props":1138,"children":1139},{},[1140,1145],{"type":27,"tag":39,"props":1141,"children":1142},{},[1143],{"type":32,"value":1144},"能力最完整",{"type":27,"tag":39,"props":1146,"children":1147},{},[1148],{"type":32,"value":1149},"适合长连接、websocket（需配合平台）",{"type":27,"tag":754,"props":1151,"children":1153},{"id":1152},"_72-serverless",[1154],{"type":32,"value":1155},"7.2 Serverless",{"type":27,"tag":35,"props":1157,"children":1158},{},[1159,1164],{"type":27,"tag":39,"props":1160,"children":1161},{},[1162],{"type":32,"value":1163},"冷启动成本、执行时长限制",{"type":27,"tag":39,"props":1165,"children":1166},{},[1167],{"type":32,"value":1168},"更适合 API 型工作负载",{"type":27,"tag":754,"props":1170,"children":1172},{"id":1171},"_73-edge",[1173],{"type":32,"value":1174},"7.3 Edge",{"type":27,"tag":35,"props":1176,"children":1177},{},[1178,1183],{"type":27,"tag":39,"props":1179,"children":1180},{},[1181],{"type":32,"value":1182},"延迟更低",{"type":27,"tag":39,"props":1184,"children":1185},{},[1186],{"type":32,"value":1187},"运行时限制更严格（例如 Node API 不可用）",{"type":27,"tag":28,"props":1189,"children":1190},{},[1191],{"type":32,"value":1192},"实践建议：",{"type":27,"tag":35,"props":1194,"children":1195},{},[1196,1201],{"type":27,"tag":39,"props":1197,"children":1198},{},[1199],{"type":32,"value":1200},"如果你依赖复杂 Node 能力（例如图像处理、原生模块），优先 Node/Serverless",{"type":27,"tag":39,"props":1202,"children":1203},{},[1204],{"type":32,"value":1205},"如果你追求极致延迟且逻辑简单，考虑 Edge",{"type":27,"tag":625,"props":1207,"children":1208},{},[],{"type":27,"tag":70,"props":1210,"children":1212},{"id":1211},"_8-性能调优nitro-侧你能做什么",[1213],{"type":32,"value":1214},"8. 性能调优：Nitro 侧你能做什么？",{"type":27,"tag":754,"props":1216,"children":1218},{"id":1217},"_81-减少阻塞-io",[1219],{"type":32,"value":1220},"8.1 减少阻塞 I/O",{"type":27,"tag":35,"props":1222,"children":1223},{},[1224,1229],{"type":27,"tag":39,"props":1225,"children":1226},{},[1227],{"type":32,"value":1228},"避免请求内做同步文件读写",{"type":27,"tag":39,"props":1230,"children":1231},{},[1232],{"type":32,"value":1233},"对“配置/规则”等可缓存数据做启动预热",{"type":27,"tag":754,"props":1235,"children":1237},{"id":1236},"_82-控制上游依赖",[1238],{"type":32,"value":1239},"8.2 控制上游依赖",{"type":27,"tag":35,"props":1241,"children":1242},{},[1243,1248],{"type":27,"tag":39,"props":1244,"children":1245},{},[1246],{"type":32,"value":1247},"给外部请求设超时（例如 2~3s）",{"type":27,"tag":39,"props":1249,"children":1250},{},[1251],{"type":32,"value":1252},"加重试要谨慎（避免雪崩）",{"type":27,"tag":754,"props":1254,"children":1256},{"id":1255},"_83-响应体积与压缩",[1257],{"type":32,"value":1258},"8.3 响应体积与压缩",{"type":27,"tag":35,"props":1260,"children":1261},{},[1262,1267],{"type":27,"tag":39,"props":1263,"children":1264},{},[1265],{"type":32,"value":1266},"JSON 输出控制字段",{"type":27,"tag":39,"props":1268,"children":1269},{},[1270],{"type":32,"value":1271},"开启 gzip/br",{"type":27,"tag":625,"props":1273,"children":1274},{},[],{"type":27,"tag":70,"props":1276,"children":1278},{"id":1277},"_9-可观测性没有观测就没有稳定",[1279],{"type":32,"value":1280},"9. 可观测性：没有观测就没有“稳定”",{"type":27,"tag":28,"props":1282,"children":1283},{},[1284],{"type":32,"value":1285},"建议 Nitro 侧最小可观测集合：",{"type":27,"tag":35,"props":1287,"children":1288},{},[1289,1294,1299,1304],{"type":27,"tag":39,"props":1290,"children":1291},{},[1292],{"type":32,"value":1293},"requestId/traceId",{"type":27,"tag":39,"props":1295,"children":1296},{},[1297],{"type":32,"value":1298},"关键路由耗时（p50/p95）",{"type":27,"tag":39,"props":1300,"children":1301},{},[1302],{"type":32,"value":1303},"错误率（按路由/按状态码）",{"type":27,"tag":39,"props":1305,"children":1306},{},[1307],{"type":32,"value":1308},"上游依赖耗时（DB/HTTP）",{"type":27,"tag":28,"props":1310,"children":1311},{},[1312],{"type":32,"value":1313},"落地方式：",{"type":27,"tag":35,"props":1315,"children":1316},{},[1317,1322],{"type":27,"tag":39,"props":1318,"children":1319},{},[1320],{"type":32,"value":1321},"在中间件注入 requestId",{"type":27,"tag":39,"props":1323,"children":1324},{},[1325],{"type":32,"value":1326},"在统一错误处理处记录结构化日志",{"type":27,"tag":625,"props":1328,"children":1329},{},[],{"type":27,"tag":70,"props":1331,"children":1333},{"id":1332},"_10-一个推荐的-nitro-工程结构",[1334],{"type":32,"value":1335},"10. 一个推荐的 Nitro 工程结构",{"type":27,"tag":28,"props":1337,"children":1338},{},[1339],{"type":32,"value":1340},"在 Nuxt 项目里，你可以这样组织服务端代码：",{"type":27,"tag":35,"props":1342,"children":1343},{},[1344,1355,1366,1377,1388],{"type":27,"tag":39,"props":1345,"children":1346},{},[1347,1353],{"type":27,"tag":562,"props":1348,"children":1350},{"className":1349},[],[1351],{"type":32,"value":1352},"server/middleware/",{"type":32,"value":1354},"：鉴权、日志、headers、rate limit",{"type":27,"tag":39,"props":1356,"children":1357},{},[1358,1364],{"type":27,"tag":562,"props":1359,"children":1361},{"className":1360},[],[1362],{"type":32,"value":1363},"server/api/",{"type":32,"value":1365},"：业务 API（薄控制器）",{"type":27,"tag":39,"props":1367,"children":1368},{},[1369,1375],{"type":27,"tag":562,"props":1370,"children":1372},{"className":1371},[],[1373],{"type":32,"value":1374},"server/services/",{"type":32,"value":1376},"：领域服务（可复用）",{"type":27,"tag":39,"props":1378,"children":1379},{},[1380,1386],{"type":27,"tag":562,"props":1381,"children":1383},{"className":1382},[],[1384],{"type":32,"value":1385},"server/repositories/",{"type":32,"value":1387},"：数据访问层",{"type":27,"tag":39,"props":1389,"children":1390},{},[1391,1397],{"type":27,"tag":562,"props":1392,"children":1394},{"className":1393},[],[1395],{"type":32,"value":1396},"server/utils/",{"type":32,"value":1398},"：纯工具",{"type":27,"tag":28,"props":1400,"children":1401},{},[1402],{"type":32,"value":1403},"目标是：",{"type":27,"tag":35,"props":1405,"children":1406},{},[1407,1412,1417],{"type":27,"tag":39,"props":1408,"children":1409},{},[1410],{"type":32,"value":1411},"handler 只做协议适配",{"type":27,"tag":39,"props":1413,"children":1414},{},[1415],{"type":32,"value":1416},"业务逻辑可复用、可测试",{"type":27,"tag":39,"props":1418,"children":1419},{},[1420],{"type":32,"value":1421},"横切能力集中化",{"type":27,"tag":625,"props":1423,"children":1424},{},[],{"type":27,"tag":70,"props":1426,"children":1427},{"id":453},[1428],{"type":32,"value":453},{"type":27,"tag":28,"props":1430,"children":1431},{},[1432,1434,1439],{"type":32,"value":1433},"Nitro 的本质是：把 Nuxt 的服务端能力变成一个",{"type":27,"tag":543,"props":1435,"children":1436},{},[1437],{"type":32,"value":1438},"可编译、可移植、可观测",{"type":32,"value":1440},"的运行时系统。",{"type":27,"tag":28,"props":1442,"children":1443},{},[1444],{"type":32,"value":1445},"你一旦理解了它的生命周期与边界，就可以更有信心地在 Nuxt 里做：",{"type":27,"tag":35,"props":1447,"children":1448},{},[1449,1454,1459,1464],{"type":27,"tag":39,"props":1450,"children":1451},{},[1452],{"type":32,"value":1453},"性能友好的 API",{"type":27,"tag":39,"props":1455,"children":1456},{},[1457],{"type":32,"value":1458},"可控的缓存",{"type":27,"tag":39,"props":1460,"children":1461},{},[1462],{"type":32,"value":1463},"稳定的鉴权与错误处理",{"type":27,"tag":39,"props":1465,"children":1466},{},[1467],{"type":32,"value":1468},"面向多环境部署的工程架构",{"title":7,"searchDepth":498,"depth":498,"links":1470},[1471,1472,1473,1474,1482,1483,1484,1488,1493,1498,1499,1500],{"id":534,"depth":501,"text":519},{"id":630,"depth":501,"text":633},{"id":691,"depth":501,"text":694},{"id":733,"depth":501,"text":1475,"children":1476},"3. 路由系统：server/api 与 server/routes 的区别",[1477,1479,1481],{"id":756,"depth":498,"text":1478},"3.1 server/api/*",{"id":785,"depth":498,"text":1480},"3.2 server/routes/*",{"id":809,"depth":498,"text":812},{"id":841,"depth":501,"text":844},{"id":904,"depth":501,"text":907},{"id":979,"depth":501,"text":982,"children":1485},[1486,1487],{"id":1008,"depth":498,"text":1011},{"id":1033,"depth":498,"text":1036},{"id":1081,"depth":501,"text":1084,"children":1489},[1490,1491,1492],{"id":1133,"depth":498,"text":1136},{"id":1152,"depth":498,"text":1155},{"id":1171,"depth":498,"text":1174},{"id":1211,"depth":501,"text":1214,"children":1494},[1495,1496,1497],{"id":1217,"depth":498,"text":1220},{"id":1236,"depth":498,"text":1239},{"id":1255,"depth":498,"text":1258},{"id":1277,"depth":501,"text":1280},{"id":1332,"depth":501,"text":1335},{"id":453,"depth":501,"text":453},"content:topics:nuxt:nitro-engine-deep-dive.md","topics/nuxt/nitro-engine-deep-dive.md","topics/nuxt/nitro-engine-deep-dive",{"_path":1505,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1506,"description":1507,"date":521,"topic":5,"author":11,"tags":1508,"image":1512,"featured":528,"readingTime":1513,"body":1514,"_type":510,"_id":2285,"_source":512,"_file":2286,"_stem":2287,"_extension":515},"/topics/nuxt/nuxt-rendering-modes-guide","Nuxt 渲染模式选择指南","从 SEO、性能、成本与一致性出发，系统对比 Nuxt 的 CSR/SSR/SSG/ISR（与预渲染）等模式，给出可执行的选型矩阵与落地架构建议。",[13,15,1509,1510,1511],"SSG","ISR","SEO","/images/topics/nuxt/rendering-modes.jpg",22,{"type":24,"children":1515,"toc":2268},[1516,1521,1526,1531,1559,1571,1574,1580,1585,1608,1613,1616,1622,1628,1633,1651,1656,1675,1681,1685,1698,1702,1715,1721,1725,1738,1742,1755,1761,1766,1779,1783,1796,1800,1813,1819,1823,1836,1840,1853,1856,1862,1867,2034,2037,2043,2048,2066,2071,2084,2087,2093,2098,2103,2126,2131,2149,2152,2158,2176,2179,2185,2238,2241,2245,2250],{"type":27,"tag":70,"props":1517,"children":1519},{"id":1518},"nuxt-渲染模式选择指南",[1520],{"type":32,"value":1506},{"type":27,"tag":28,"props":1522,"children":1523},{},[1524],{"type":32,"value":1525},"“到底要不要 SSR？”是 Nuxt 项目里最常见、也最容易吵起来的问题。",{"type":27,"tag":28,"props":1527,"children":1528},{},[1529],{"type":32,"value":1530},"原因是：渲染模式不是一个单点选择，它同时牵动：",{"type":27,"tag":35,"props":1532,"children":1533},{},[1534,1539,1544,1549,1554],{"type":27,"tag":39,"props":1535,"children":1536},{},[1537],{"type":32,"value":1538},"SEO（可索引内容是否直出）",{"type":27,"tag":39,"props":1540,"children":1541},{},[1542],{"type":32,"value":1543},"性能（TTFB/LCP/INP）",{"type":27,"tag":39,"props":1545,"children":1546},{},[1547],{"type":32,"value":1548},"成本（回源、算力、带宽）",{"type":27,"tag":39,"props":1550,"children":1551},{},[1552],{"type":32,"value":1553},"一致性（内容更新策略、缓存失效）",{"type":27,"tag":39,"props":1555,"children":1556},{},[1557],{"type":32,"value":1558},"工程复杂度（部署、观测、回滚）",{"type":27,"tag":28,"props":1560,"children":1561},{},[1562,1564,1569],{"type":32,"value":1563},"这篇文章给你一套",{"type":27,"tag":543,"props":1565,"children":1566},{},[1567],{"type":32,"value":1568},"可执行的选型方法",{"type":32,"value":1570},"：先定义目标，再选模式，最后给落地结构与检查清单。",{"type":27,"tag":625,"props":1572,"children":1573},{},[],{"type":27,"tag":70,"props":1575,"children":1577},{"id":1576},"_1-四个维度决定你的模式",[1578],{"type":32,"value":1579},"1. 四个维度，决定你的模式",{"type":27,"tag":28,"props":1581,"children":1582},{},[1583],{"type":32,"value":1584},"在做任何选择前，先回答四个问题：",{"type":27,"tag":640,"props":1586,"children":1587},{},[1588,1593,1598,1603],{"type":27,"tag":39,"props":1589,"children":1590},{},[1591],{"type":32,"value":1592},"页面是否需要 SEO？（搜索引擎是否必须看到正文）",{"type":27,"tag":39,"props":1594,"children":1595},{},[1596],{"type":32,"value":1597},"数据是否强一致？（用户态/支付/权限）",{"type":27,"tag":39,"props":1599,"children":1600},{},[1601],{"type":32,"value":1602},"更新频率如何？（发布频繁 vs 偶尔）",{"type":27,"tag":39,"props":1604,"children":1605},{},[1606],{"type":32,"value":1607},"流量模型是什么？（突发、平稳、长尾）",{"type":27,"tag":28,"props":1609,"children":1610},{},[1611],{"type":32,"value":1612},"这些问题比“SSR 快还是慢”更重要。",{"type":27,"tag":625,"props":1614,"children":1615},{},[],{"type":27,"tag":70,"props":1617,"children":1619},{"id":1618},"_2-主要模式概览csr-ssr-ssg-isr-预渲染",[1620],{"type":32,"value":1621},"2. 主要模式概览：CSR / SSR / SSG / ISR / 预渲染",{"type":27,"tag":754,"props":1623,"children":1625},{"id":1624},"_21-csr纯客户端渲染",[1626],{"type":32,"value":1627},"2.1 CSR（纯客户端渲染）",{"type":27,"tag":28,"props":1629,"children":1630},{},[1631],{"type":32,"value":1632},"特点：",{"type":27,"tag":35,"props":1634,"children":1635},{},[1636,1641,1646],{"type":27,"tag":39,"props":1637,"children":1638},{},[1639],{"type":32,"value":1640},"HTML 只有壳",{"type":27,"tag":39,"props":1642,"children":1643},{},[1644],{"type":32,"value":1645},"SEO 风险大（除非你不索引）",{"type":27,"tag":39,"props":1647,"children":1648},{},[1649],{"type":32,"value":1650},"首屏性能取决于 JS 与接口",{"type":27,"tag":28,"props":1652,"children":1653},{},[1654],{"type":32,"value":1655},"适用：",{"type":27,"tag":35,"props":1657,"children":1658},{},[1659,1664],{"type":27,"tag":39,"props":1660,"children":1661},{},[1662],{"type":32,"value":1663},"用户中心、后台、强交互工具",{"type":27,"tag":39,"props":1665,"children":1666},{},[1667,1669],{"type":32,"value":1668},"不需要索引或明确 ",{"type":27,"tag":562,"props":1670,"children":1672},{"className":1671},[],[1673],{"type":32,"value":1674},"noindex",{"type":27,"tag":754,"props":1676,"children":1678},{"id":1677},"_22-ssr服务端渲染",[1679],{"type":32,"value":1680},"2.2 SSR（服务端渲染）",{"type":27,"tag":28,"props":1682,"children":1683},{},[1684],{"type":32,"value":1632},{"type":27,"tag":35,"props":1686,"children":1687},{},[1688,1693],{"type":27,"tag":39,"props":1689,"children":1690},{},[1691],{"type":32,"value":1692},"首屏 HTML 直出，SEO 友好",{"type":27,"tag":39,"props":1694,"children":1695},{},[1696],{"type":32,"value":1697},"每次请求可能都需要回源（需要缓存）",{"type":27,"tag":28,"props":1699,"children":1700},{},[1701],{"type":32,"value":1655},{"type":27,"tag":35,"props":1703,"children":1704},{},[1705,1710],{"type":27,"tag":39,"props":1706,"children":1707},{},[1708],{"type":32,"value":1709},"内容需要 SEO，但数据强动态",{"type":27,"tag":39,"props":1711,"children":1712},{},[1713],{"type":32,"value":1714},"你有完善的缓存策略",{"type":27,"tag":754,"props":1716,"children":1718},{"id":1717},"_23-ssg静态生成",[1719],{"type":32,"value":1720},"2.3 SSG（静态生成）",{"type":27,"tag":28,"props":1722,"children":1723},{},[1724],{"type":32,"value":1632},{"type":27,"tag":35,"props":1726,"children":1727},{},[1728,1733],{"type":27,"tag":39,"props":1729,"children":1730},{},[1731],{"type":32,"value":1732},"性能与稳定性最好",{"type":27,"tag":39,"props":1734,"children":1735},{},[1736],{"type":32,"value":1737},"更新成本在“构建时”",{"type":27,"tag":28,"props":1739,"children":1740},{},[1741],{"type":32,"value":1655},{"type":27,"tag":35,"props":1743,"children":1744},{},[1745,1750],{"type":27,"tag":39,"props":1746,"children":1747},{},[1748],{"type":32,"value":1749},"内容站、文档站、营销页",{"type":27,"tag":39,"props":1751,"children":1752},{},[1753],{"type":32,"value":1754},"更新频率不高或可接受构建延迟",{"type":27,"tag":754,"props":1756,"children":1758},{"id":1757},"_24-isr增量静态再生按需生成",[1759],{"type":32,"value":1760},"2.4 ISR（增量静态再生/按需生成）",{"type":27,"tag":28,"props":1762,"children":1763},{},[1764],{"type":32,"value":1765},"在 Nuxt 体系里，ISR 的表达可能来自：",{"type":27,"tag":35,"props":1767,"children":1768},{},[1769,1774],{"type":27,"tag":39,"props":1770,"children":1771},{},[1772],{"type":32,"value":1773},"生成策略 + 缓存策略",{"type":27,"tag":39,"props":1775,"children":1776},{},[1777],{"type":32,"value":1778},"或配合边缘缓存与按需失效",{"type":27,"tag":28,"props":1780,"children":1781},{},[1782],{"type":32,"value":1632},{"type":27,"tag":35,"props":1784,"children":1785},{},[1786,1791],{"type":27,"tag":39,"props":1787,"children":1788},{},[1789],{"type":32,"value":1790},"静态化收益 + 可控更新",{"type":27,"tag":39,"props":1792,"children":1793},{},[1794],{"type":32,"value":1795},"需要你设计“失效与再生成”",{"type":27,"tag":28,"props":1797,"children":1798},{},[1799],{"type":32,"value":1655},{"type":27,"tag":35,"props":1801,"children":1802},{},[1803,1808],{"type":27,"tag":39,"props":1804,"children":1805},{},[1806],{"type":32,"value":1807},"内容更新频繁，但仍要 SEO",{"type":27,"tag":39,"props":1809,"children":1810},{},[1811],{"type":32,"value":1812},"你希望在高峰也保持稳定",{"type":27,"tag":754,"props":1814,"children":1816},{"id":1815},"_25-预渲染prerender",[1817],{"type":32,"value":1818},"2.5 预渲染（prerender）",{"type":27,"tag":28,"props":1820,"children":1821},{},[1822],{"type":32,"value":1632},{"type":27,"tag":35,"props":1824,"children":1825},{},[1826,1831],{"type":27,"tag":39,"props":1827,"children":1828},{},[1829],{"type":32,"value":1830},"对部分路由预先生成 HTML",{"type":27,"tag":39,"props":1832,"children":1833},{},[1834],{"type":32,"value":1835},"适合混合站点",{"type":27,"tag":28,"props":1837,"children":1838},{},[1839],{"type":32,"value":1655},{"type":27,"tag":35,"props":1841,"children":1842},{},[1843,1848],{"type":27,"tag":39,"props":1844,"children":1845},{},[1846],{"type":32,"value":1847},"首页/核心落地页需要 SEO",{"type":27,"tag":39,"props":1849,"children":1850},{},[1851],{"type":32,"value":1852},"工具页/用户页不需要 SEO",{"type":27,"tag":625,"props":1854,"children":1855},{},[],{"type":27,"tag":70,"props":1857,"children":1859},{"id":1858},"_3-选型矩阵可直接用",[1860],{"type":32,"value":1861},"3. 选型矩阵（可直接用）",{"type":27,"tag":28,"props":1863,"children":1864},{},[1865],{"type":32,"value":1866},"你可以按路由维度做选型，而不是全站一刀切。",{"type":27,"tag":1868,"props":1869,"children":1870},"table",{},[1871,1899],{"type":27,"tag":1872,"props":1873,"children":1874},"thead",{},[1875],{"type":27,"tag":1876,"props":1877,"children":1878},"tr",{},[1879,1885,1889,1894],{"type":27,"tag":1880,"props":1881,"children":1882},"th",{},[1883],{"type":32,"value":1884},"页面类型",{"type":27,"tag":1880,"props":1886,"children":1887},{},[1888],{"type":32,"value":1511},{"type":27,"tag":1880,"props":1890,"children":1891},{},[1892],{"type":32,"value":1893},"更新频率",{"type":27,"tag":1880,"props":1895,"children":1896},{},[1897],{"type":32,"value":1898},"推荐",{"type":27,"tag":1900,"props":1901,"children":1902},"tbody",{},[1903,1927,1948,1969,1990,2012],{"type":27,"tag":1876,"props":1904,"children":1905},{},[1906,1912,1917,1922],{"type":27,"tag":1907,"props":1908,"children":1909},"td",{},[1910],{"type":32,"value":1911},"文章详情",{"type":27,"tag":1907,"props":1913,"children":1914},{},[1915],{"type":32,"value":1916},"高",{"type":27,"tag":1907,"props":1918,"children":1919},{},[1920],{"type":32,"value":1921},"中",{"type":27,"tag":1907,"props":1923,"children":1924},{},[1925],{"type":32,"value":1926},"SSG/ISR",{"type":27,"tag":1876,"props":1928,"children":1929},{},[1930,1935,1939,1943],{"type":27,"tag":1907,"props":1931,"children":1932},{},[1933],{"type":32,"value":1934},"文章列表",{"type":27,"tag":1907,"props":1936,"children":1937},{},[1938],{"type":32,"value":1916},{"type":27,"tag":1907,"props":1940,"children":1941},{},[1942],{"type":32,"value":1921},{"type":27,"tag":1907,"props":1944,"children":1945},{},[1946],{"type":32,"value":1947},"SSG/ISR（注意聚合页）",{"type":27,"tag":1876,"props":1949,"children":1950},{},[1951,1956,1960,1964],{"type":27,"tag":1907,"props":1952,"children":1953},{},[1954],{"type":32,"value":1955},"产品详情",{"type":27,"tag":1907,"props":1957,"children":1958},{},[1959],{"type":32,"value":1916},{"type":27,"tag":1907,"props":1961,"children":1962},{},[1963],{"type":32,"value":1916},{"type":27,"tag":1907,"props":1965,"children":1966},{},[1967],{"type":32,"value":1968},"ISR/SSR（配缓存）",{"type":27,"tag":1876,"props":1970,"children":1971},{},[1972,1977,1981,1985],{"type":27,"tag":1907,"props":1973,"children":1974},{},[1975],{"type":32,"value":1976},"搜索结果",{"type":27,"tag":1907,"props":1978,"children":1979},{},[1980],{"type":32,"value":1921},{"type":27,"tag":1907,"props":1982,"children":1983},{},[1984],{"type":32,"value":1916},{"type":27,"tag":1907,"props":1986,"children":1987},{},[1988],{"type":32,"value":1989},"SSR/CSR（配 noindex）",{"type":27,"tag":1876,"props":1991,"children":1992},{},[1993,1998,2003,2007],{"type":27,"tag":1907,"props":1994,"children":1995},{},[1996],{"type":32,"value":1997},"用户中心",{"type":27,"tag":1907,"props":1999,"children":2000},{},[2001],{"type":32,"value":2002},"低",{"type":27,"tag":1907,"props":2004,"children":2005},{},[2006],{"type":32,"value":1916},{"type":27,"tag":1907,"props":2008,"children":2009},{},[2010],{"type":32,"value":2011},"CSR",{"type":27,"tag":1876,"props":2013,"children":2014},{},[2015,2020,2025,2029],{"type":27,"tag":1907,"props":2016,"children":2017},{},[2018],{"type":32,"value":2019},"工具页",{"type":27,"tag":1907,"props":2021,"children":2022},{},[2023],{"type":32,"value":2024},"低/中",{"type":27,"tag":1907,"props":2026,"children":2027},{},[2028],{"type":32,"value":1921},{"type":27,"tag":1907,"props":2030,"children":2031},{},[2032],{"type":32,"value":2033},"CSR + 预渲染核心路由",{"type":27,"tag":625,"props":2035,"children":2036},{},[],{"type":27,"tag":70,"props":2038,"children":2040},{"id":2039},"_4-混合渲染真正的生产最优解",[2041],{"type":32,"value":2042},"4. 混合渲染：真正的生产最优解",{"type":27,"tag":28,"props":2044,"children":2045},{},[2046],{"type":32,"value":2047},"生产上最常见的模式是混合：",{"type":27,"tag":35,"props":2049,"children":2050},{},[2051,2056,2061],{"type":27,"tag":39,"props":2052,"children":2053},{},[2054],{"type":32,"value":2055},"公共内容：静态化（SSG/ISR）+ CDN",{"type":27,"tag":39,"props":2057,"children":2058},{},[2059],{"type":32,"value":2060},"用户态内容：CSR 或 SSR（private/no-store）",{"type":27,"tag":39,"props":2062,"children":2063},{},[2064],{"type":32,"value":2065},"关键落地页：预渲染",{"type":27,"tag":28,"props":2067,"children":2068},{},[2069],{"type":32,"value":2070},"好处：",{"type":27,"tag":35,"props":2072,"children":2073},{},[2074,2079],{"type":27,"tag":39,"props":2075,"children":2076},{},[2077],{"type":32,"value":2078},"SEO 与性能兼得",{"type":27,"tag":39,"props":2080,"children":2081},{},[2082],{"type":32,"value":2083},"成本可控",{"type":27,"tag":625,"props":2085,"children":2086},{},[],{"type":27,"tag":70,"props":2088,"children":2090},{"id":2089},"_5-缓存与失效模式落地的关键",[2091],{"type":32,"value":2092},"5. 缓存与失效：模式落地的关键",{"type":27,"tag":28,"props":2094,"children":2095},{},[2096],{"type":32,"value":2097},"无论你选 SSR 还是 ISR，本质都离不开缓存。",{"type":27,"tag":28,"props":2099,"children":2100},{},[2101],{"type":32,"value":2102},"建议把缓存分层：",{"type":27,"tag":35,"props":2104,"children":2105},{},[2106,2111,2116,2121],{"type":27,"tag":39,"props":2107,"children":2108},{},[2109],{"type":32,"value":2110},"浏览器",{"type":27,"tag":39,"props":2112,"children":2113},{},[2114],{"type":32,"value":2115},"CDN",{"type":27,"tag":39,"props":2117,"children":2118},{},[2119],{"type":32,"value":2120},"应用侧（server runtime）",{"type":27,"tag":39,"props":2122,"children":2123},{},[2124],{"type":32,"value":2125},"数据侧（Redis/DB）",{"type":27,"tag":28,"props":2127,"children":2128},{},[2129],{"type":32,"value":2130},"并给每条路由明确：",{"type":27,"tag":35,"props":2132,"children":2133},{},[2134,2139,2144],{"type":27,"tag":39,"props":2135,"children":2136},{},[2137],{"type":32,"value":2138},"是否 public/private",{"type":27,"tag":39,"props":2140,"children":2141},{},[2142],{"type":32,"value":2143},"TTL 多久",{"type":27,"tag":39,"props":2145,"children":2146},{},[2147],{"type":32,"value":2148},"写操作后如何失效",{"type":27,"tag":625,"props":2150,"children":2151},{},[],{"type":27,"tag":70,"props":2153,"children":2155},{"id":2154},"_6-常见误区",[2156],{"type":32,"value":2157},"6. 常见误区",{"type":27,"tag":35,"props":2159,"children":2160},{},[2161,2166,2171],{"type":27,"tag":39,"props":2162,"children":2163},{},[2164],{"type":32,"value":2165},"“SSR 一定更快”：不一定，TTFB 可能更慢；LCP 受资源与主线程影响更大",{"type":27,"tag":39,"props":2167,"children":2168},{},[2169],{"type":32,"value":2170},"“SSG 一定更好”：构建成本与发布延迟可能无法接受",{"type":27,"tag":39,"props":2172,"children":2173},{},[2174],{"type":32,"value":2175},"“全站一个模式最省事”：短期省事，长期很难优化与扩展",{"type":27,"tag":625,"props":2177,"children":2178},{},[],{"type":27,"tag":70,"props":2180,"children":2182},{"id":2181},"_7-上线检查清单",[2183],{"type":32,"value":2184},"7. 上线检查清单",{"type":27,"tag":35,"props":2186,"children":2189},{"className":2187},[2188],"contains-task-list",[2190,2202,2211,2220,2229],{"type":27,"tag":39,"props":2191,"children":2194},{"className":2192},[2193],"task-list-item",[2195,2200],{"type":27,"tag":2196,"props":2197,"children":2199},"input",{"disabled":528,"type":2198},"checkbox",[],{"type":32,"value":2201}," 按路由明确 SEO 需求（哪些可索引）",{"type":27,"tag":39,"props":2203,"children":2205},{"className":2204},[2193],[2206,2209],{"type":27,"tag":2196,"props":2207,"children":2208},{"disabled":528,"type":2198},[],{"type":32,"value":2210}," 用户态页面是否 private/no-store",{"type":27,"tag":39,"props":2212,"children":2214},{"className":2213},[2193],[2215,2218],{"type":27,"tag":2196,"props":2216,"children":2217},{"disabled":528,"type":2198},[],{"type":32,"value":2219}," 公共内容是否走 CDN 并有合理 TTL",{"type":27,"tag":39,"props":2221,"children":2223},{"className":2222},[2193],[2224,2227],{"type":27,"tag":2196,"props":2225,"children":2226},{"disabled":528,"type":2198},[],{"type":32,"value":2228}," 更新路径是否有失效机制（发布事件）",{"type":27,"tag":39,"props":2230,"children":2232},{"className":2231},[2193],[2233,2236],{"type":27,"tag":2196,"props":2234,"children":2235},{"disabled":528,"type":2198},[],{"type":32,"value":2237}," 是否有 RUM/日志来验证效果",{"type":27,"tag":625,"props":2239,"children":2240},{},[],{"type":27,"tag":70,"props":2242,"children":2243},{"id":453},[2244],{"type":32,"value":453},{"type":27,"tag":28,"props":2246,"children":2247},{},[2248],{"type":32,"value":2249},"Nuxt 渲染模式选型的正确做法是：",{"type":27,"tag":35,"props":2251,"children":2252},{},[2253,2258,2263],{"type":27,"tag":39,"props":2254,"children":2255},{},[2256],{"type":32,"value":2257},"以“页面类型”而不是“站点整体”做选择",{"type":27,"tag":39,"props":2259,"children":2260},{},[2261],{"type":32,"value":2262},"把缓存与失效当成一等公民",{"type":27,"tag":39,"props":2264,"children":2265},{},[2266],{"type":32,"value":2267},"用观测验证，而不是凭感觉",{"title":7,"searchDepth":498,"depth":498,"links":2269},[2270,2271,2272,2279,2280,2281,2282,2283,2284],{"id":1518,"depth":501,"text":1506},{"id":1576,"depth":501,"text":1579},{"id":1618,"depth":501,"text":1621,"children":2273},[2274,2275,2276,2277,2278],{"id":1624,"depth":498,"text":1627},{"id":1677,"depth":498,"text":1680},{"id":1717,"depth":498,"text":1720},{"id":1757,"depth":498,"text":1760},{"id":1815,"depth":498,"text":1818},{"id":1858,"depth":501,"text":1861},{"id":2039,"depth":501,"text":2042},{"id":2089,"depth":501,"text":2092},{"id":2154,"depth":501,"text":2157},{"id":2181,"depth":501,"text":2184},{"id":453,"depth":501,"text":453},"content:topics:nuxt:nuxt-rendering-modes-guide.md","topics/nuxt/nuxt-rendering-modes-guide.md","topics/nuxt/nuxt-rendering-modes-guide",{"_path":2289,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2290,"description":2291,"date":2292,"topic":5,"author":11,"tags":2293,"image":2298,"featured":528,"readingTime":2299,"body":2300,"_type":510,"_id":2826,"_source":512,"_file":2827,"_stem":2828,"_extension":515},"/topics/nuxt/nuxt4-major-updates-overview","Nuxt 4 重大更新全面解读：架构升级与开发体验革新","深入解析 Nuxt 4 的重大更新，包括新目录结构、Nitro 2.0 引擎、兼容性层变化、性能优化等核心改进，帮助开发者全面了解新版本特性并做好升级准备。","2026-01-18",[2294,2295,15,2296,2297],"Nuxt 4","Vue","全栈框架","版本升级","/images/topics/nuxt/nuxt4-features-overview.jpg",16,{"type":24,"children":2301,"toc":2787},[2302,2308,2314,2319,2324,2330,2336,2341,2350,2358,2366,2372,2377,2388,2394,2403,2409,2415,2420,2429,2435,2444,2450,2459,2465,2471,2480,2486,2495,2501,2510,2516,2522,2531,2537,2546,2552,2563,2572,2578,2584,2593,2599,2608,2614,2623,2629,2635,2644,2650,2659,2665,2671,2681,2687,2696,2702,2707,2712,2717,2735,2738,2743],{"type":27,"tag":70,"props":2303,"children":2305},{"id":2304},"nuxt-4-重大更新全面解读",[2306],{"type":32,"value":2307},"Nuxt 4 重大更新全面解读",{"type":27,"tag":70,"props":2309,"children":2311},{"id":2310},"引言nuxt-的又一次进化",[2312],{"type":32,"value":2313},"引言：Nuxt 的又一次进化",{"type":27,"tag":28,"props":2315,"children":2316},{},[2317],{"type":32,"value":2318},"Nuxt 4 的发布标志着这个 Vue 生态中最受欢迎的全栈框架又迈入了新阶段。从 Nuxt 2 到 Nuxt 3 是一次彻底重写，而 Nuxt 3 到 Nuxt 4 则是在成熟架构上的精进打磨——更清晰的目录结构、更强大的引擎、更好的开发体验。",{"type":27,"tag":28,"props":2320,"children":2321},{},[2322],{"type":32,"value":2323},"这篇文章将全面解读 Nuxt 4 的核心变化，帮助你理解这些改动背后的设计理念，以及它们将如何影响你的日常开发。",{"type":27,"tag":70,"props":2325,"children":2327},{"id":2326},"第一部分新目录结构",[2328],{"type":32,"value":2329},"第一部分：新目录结构",{"type":27,"tag":754,"props":2331,"children":2333},{"id":2332},"_11-从扁平到分层",[2334],{"type":32,"value":2335},"1.1 从扁平到分层",{"type":27,"tag":28,"props":2337,"children":2338},{},[2339],{"type":32,"value":2340},"Nuxt 4 引入了新的目录结构，将应用代码与配置分离：",{"type":27,"tag":2342,"props":2343,"children":2345},"pre",{"code":2344},"# Nuxt 3 目录结构\nproject/\n├── .nuxt/\n├── app.vue\n├── components/\n├── composables/\n├── layouts/\n├── middleware/\n├── pages/\n├── plugins/\n├── public/\n├── server/\n├── nuxt.config.ts\n└── package.json\n\n# Nuxt 4 新目录结构\nproject/\n├── .nuxt/\n├── app/                  # 应用代码集中在 app/ 目录\n│   ├── app.vue\n│   ├── components/\n│   ├── composables/\n│   ├── layouts/\n│   ├── middleware/\n│   ├── pages/\n│   └── plugins/\n├── public/\n├── server/\n├── nuxt.config.ts\n└── package.json\n",[2346],{"type":27,"tag":562,"props":2347,"children":2348},{"__ignoreMap":7},[2349],{"type":32,"value":2344},{"type":27,"tag":28,"props":2351,"children":2352},{},[2353],{"type":27,"tag":543,"props":2354,"children":2355},{},[2356],{"type":32,"value":2357},"为什么这样设计？",{"type":27,"tag":2342,"props":2359,"children":2361},{"code":2360},"┌────────────────────────────────────────────────────────────┐\n│              新目录结构的设计理念                            │\n├────────────────────────────────────────────────────────────┤\n│                                                            │\n│  1. 关注点分离                                             │\n│     ├── app/ - 客户端/同构代码                             │\n│     ├── server/ - 服务端代码                               │\n│     └── 根目录 - 配置和公共资源                             │\n│                                                            │\n│  2. 更清晰的项目边界                                       │\n│     ├── Monorepo 友好                                      │\n│     ├── 多应用项目更清晰                                   │\n│     └── 与其他框架惯例对齐                                 │\n│                                                            │\n│  3. 未来扩展性                                             │\n│     ├── 为多前端支持做准备                                 │\n│     └── 便于工具链识别和处理                               │\n│                                                            │\n└────────────────────────────────────────────────────────────┘\n",[2362],{"type":27,"tag":562,"props":2363,"children":2364},{"__ignoreMap":7},[2365],{"type":32,"value":2360},{"type":27,"tag":754,"props":2367,"children":2369},{"id":2368},"_12-向后兼容",[2370],{"type":32,"value":2371},"1.2 向后兼容",{"type":27,"tag":28,"props":2373,"children":2374},{},[2375],{"type":32,"value":2376},"Nuxt 4 提供了兼容性选项，允许继续使用旧目录结构：",{"type":27,"tag":2342,"props":2378,"children":2383},{"code":2379,"language":2380,"meta":7,"className":2381},"// nuxt.config.ts\nexport default defineNuxtConfig({\n  future: {\n    compatibilityVersion: 4  // 启用 Nuxt 4 特性\n  },\n  \n  // 如果需要继续使用旧目录结构\n  srcDir: './',  // 而不是 'app/'\n  \n  // 或者自定义目录\n  dir: {\n    app: 'src',\n    pages: 'src/pages',\n    layouts: 'src/layouts'\n  }\n});\n","typescript",[2382],"language-typescript",[2384],{"type":27,"tag":562,"props":2385,"children":2386},{"__ignoreMap":7},[2387],{"type":32,"value":2379},{"type":27,"tag":754,"props":2389,"children":2391},{"id":2390},"_13-appconfigts-变化",[2392],{"type":32,"value":2393},"1.3 app.config.ts 变化",{"type":27,"tag":2342,"props":2395,"children":2398},{"code":2396,"language":2380,"meta":7,"className":2397},"// Nuxt 3: app.config.ts 在项目根目录\n// Nuxt 4: app.config.ts 移入 app/ 目录\n\n// app/app.config.ts\nexport default defineAppConfig({\n  ui: {\n    primary: 'green',\n    gray: 'slate'\n  },\n  \n  // 类型安全的应用配置\n  meta: {\n    name: 'My App',\n    description: 'A Nuxt 4 Application'\n  }\n});\n\n// 使用方式不变\nconst appConfig = useAppConfig();\nconsole.log(appConfig.ui.primary);  // 'green'\n",[2382],[2399],{"type":27,"tag":562,"props":2400,"children":2401},{"__ignoreMap":7},[2402],{"type":32,"value":2396},{"type":27,"tag":70,"props":2404,"children":2406},{"id":2405},"第二部分nitro-20-引擎升级",[2407],{"type":32,"value":2408},"第二部分：Nitro 2.0 引擎升级",{"type":27,"tag":754,"props":2410,"children":2412},{"id":2411},"_21-性能提升",[2413],{"type":32,"value":2414},"2.1 性能提升",{"type":27,"tag":28,"props":2416,"children":2417},{},[2418],{"type":32,"value":2419},"Nitro 2.0 带来了显著的性能改进：",{"type":27,"tag":2342,"props":2421,"children":2424},{"code":2422,"language":2380,"meta":7,"className":2423},"// 冷启动时间优化\n// Nitro 1.x: ~150ms\n// Nitro 2.0: ~80ms (约 47% 提升)\n\n// 内存占用优化\n// 同样的应用，内存占用减少约 20%\n\n// 原因：\n// - 更高效的模块加载\n// - 优化的树摇（tree-shaking）\n// - 减少运行时开销\n",[2382],[2425],{"type":27,"tag":562,"props":2426,"children":2427},{"__ignoreMap":7},[2428],{"type":32,"value":2422},{"type":27,"tag":754,"props":2430,"children":2432},{"id":2431},"_22-新的路由系统",[2433],{"type":32,"value":2434},"2.2 新的路由系统",{"type":27,"tag":2342,"props":2436,"children":2439},{"code":2437,"language":2380,"meta":7,"className":2438},"// server/routes/api/[...slug].ts\n\n// Nitro 2.0 新的路由定义方式\nexport default defineEventHandler({\n  // 路由级别配置\n  config: {\n    // 缓存配置\n    cache: {\n      maxAge: 60,\n      staleMaxAge: 3600,\n      swr: true\n    },\n    \n    // CORS 配置\n    cors: {\n      origin: ['https://example.com'],\n      methods: ['GET', 'POST']\n    }\n  },\n  \n  // 处理函数\n  handler: async (event) => {\n    const slug = event.context.params?.slug;\n    return { data: await fetchData(slug) };\n  }\n});\n\n// 支持中间件链\nexport default defineEventHandler({\n  onRequest: [authMiddleware, rateLimitMiddleware],\n  onBeforeResponse: [logMiddleware],\n  \n  handler: (event) => {\n    return { message: 'Hello' };\n  }\n});\n",[2382],[2440],{"type":27,"tag":562,"props":2441,"children":2442},{"__ignoreMap":7},[2443],{"type":32,"value":2437},{"type":27,"tag":754,"props":2445,"children":2447},{"id":2446},"_23-增强的数据获取",[2448],{"type":32,"value":2449},"2.3 增强的数据获取",{"type":27,"tag":2342,"props":2451,"children":2454},{"code":2452,"language":2380,"meta":7,"className":2453},"// Nitro 2.0 改进的 $fetch\n\n// 自动请求去重\nconst [user, posts] = await Promise.all([\n  $fetch('/api/user/1'),\n  $fetch('/api/user/1')  // 相同请求自动去重\n]);\n\n// 请求拦截器\nexport default defineNuxtPlugin(() => {\n  const { $fetch } = useNuxtApp();\n  \n  // 全局请求配置\n  globalThis.$fetch = $fetch.create({\n    onRequest({ request, options }) {\n      options.headers = {\n        ...options.headers,\n        Authorization: `Bearer ${getToken()}`\n      };\n    },\n    \n    onResponseError({ response }) {\n      if (response.status === 401) {\n        navigateTo('/login');\n      }\n    }\n  });\n});\n",[2382],[2455],{"type":27,"tag":562,"props":2456,"children":2457},{"__ignoreMap":7},[2458],{"type":32,"value":2452},{"type":27,"tag":70,"props":2460,"children":2462},{"id":2461},"第三部分兼容性层变化",[2463],{"type":32,"value":2464},"第三部分：兼容性层变化",{"type":27,"tag":754,"props":2466,"children":2468},{"id":2467},"_31-移除的废弃-api",[2469],{"type":32,"value":2470},"3.1 移除的废弃 API",{"type":27,"tag":2342,"props":2472,"children":2475},{"code":2473,"language":2380,"meta":7,"className":2474},"// Nuxt 4 移除了 Nuxt 3 中标记为废弃的 API\n\n// ❌ 已移除\nimport { defineNuxtRouteMiddleware } from '#app'\n\n// ✅ 使用新的 API\nimport { defineNuxtRouteMiddleware } from 'nuxt/app'\n\n// ❌ 已移除\nconst nuxtApp = useNuxtApp()\nnuxtApp.$router  // 不再有 $ 前缀\n\n// ✅ 使用 composables\nconst router = useRouter()\n\n// ❌ 已移除\nuseAsyncData('key', () => fetch(), { lazy: true })\n\n// ✅ 使用 useLazyAsyncData\nuseLazyAsyncData('key', () => fetch())\n",[2382],[2476],{"type":27,"tag":562,"props":2477,"children":2478},{"__ignoreMap":7},[2479],{"type":32,"value":2473},{"type":27,"tag":754,"props":2481,"children":2483},{"id":2482},"_32-类型系统改进",[2484],{"type":32,"value":2485},"3.2 类型系统改进",{"type":27,"tag":2342,"props":2487,"children":2490},{"code":2488,"language":2380,"meta":7,"className":2489},"// Nuxt 4 增强的类型推导\n\n// 页面元数据类型\n// pages/dashboard.vue\n\u003Cscript setup lang=\"ts\">\ndefinePageMeta({\n  // 类型自动推导，IDE 自动补全\n  layout: 'admin',  // 只能填已定义的布局\n  middleware: ['auth'],  // 只能填已定义的中间件\n  \n  // 自定义元数据\n  title: '仪表盘',\n  requiresAuth: true\n});\n\u003C/script>\n\n// 路由参数类型\n// pages/users/[id].vue\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute('users-id');\n//             ^? RouteLocationNormalized\u003C'users-id'>\n\nroute.params.id  // 类型: string\n\u003C/script>\n\n// 运行时配置类型\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  runtimeConfig: {\n    // 私有配置（仅服务端）\n    apiSecret: '',\n    \n    // 公开配置\n    public: {\n      apiBase: ''\n    }\n  }\n});\n\n// 使用时自动推导类型\nconst config = useRuntimeConfig();\nconfig.apiSecret;  // 服务端可用\nconfig.public.apiBase;  // 客户端可用\n",[2382],[2491],{"type":27,"tag":562,"props":2492,"children":2493},{"__ignoreMap":7},[2494],{"type":32,"value":2488},{"type":27,"tag":754,"props":2496,"children":2498},{"id":2497},"_33-useasyncdata-改进",[2499],{"type":32,"value":2500},"3.3 useAsyncData 改进",{"type":27,"tag":2342,"props":2502,"children":2505},{"code":2503,"language":2380,"meta":7,"className":2504},"// Nuxt 4 中 useAsyncData 的改进\n\n// 改进 1：更好的错误处理\nconst { data, error, status } = await useAsyncData('users', () => $fetch('/api/users'));\n\n// status 新增更多状态\n// 'idle' | 'pending' | 'success' | 'error'\n\n// 改进 2：简化的刷新机制\nconst { refresh, clear } = await useAsyncData('users', () => $fetch('/api/users'));\n\n// 带参数刷新\nawait refresh({ dedupe: true });\n\n// 清除缓存\nclear();\n\n// 改进 3：深度响应式默认关闭\nconst { data } = await useAsyncData('config', () => $fetch('/api/config'), {\n  deep: false  // 默认 false，提升性能\n});\n\n// 需要深度响应式时显式开启\nconst { data } = await useAsyncData('form', () => $fetch('/api/form'), {\n  deep: true\n});\n",[2382],[2506],{"type":27,"tag":562,"props":2507,"children":2508},{"__ignoreMap":7},[2509],{"type":32,"value":2503},{"type":27,"tag":70,"props":2511,"children":2513},{"id":2512},"第四部分开发体验改进",[2514],{"type":32,"value":2515},"第四部分：开发体验改进",{"type":27,"tag":754,"props":2517,"children":2519},{"id":2518},"_41-nuxt-devtools-增强",[2520],{"type":32,"value":2521},"4.1 Nuxt DevTools 增强",{"type":27,"tag":2342,"props":2523,"children":2526},{"code":2524,"language":2380,"meta":7,"className":2525},"// Nuxt 4 内置增强版 DevTools\n\n// 新功能：\n// 1. 组件性能分析\n// - 渲染时间追踪\n// - 不必要渲染检测\n// - 内存使用监控\n\n// 2. 数据流可视化\n// - useAsyncData 调用时序图\n// - 数据缓存状态\n// - 请求去重可视化\n\n// 3. 路由调试\n// - 路由匹配过程\n// - 中间件执行顺序\n// - 导航守卫状态\n\n// 启用高级功能\nexport default defineNuxtConfig({\n  devtools: {\n    enabled: true,\n    \n    // 新选项\n    timeline: {\n      enabled: true  // 启用时间线\n    }\n  }\n});\n",[2382],[2527],{"type":27,"tag":562,"props":2528,"children":2529},{"__ignoreMap":7},[2530],{"type":32,"value":2524},{"type":27,"tag":754,"props":2532,"children":2534},{"id":2533},"_42-热更新优化",[2535],{"type":32,"value":2536},"4.2 热更新优化",{"type":27,"tag":2342,"props":2538,"children":2541},{"code":2539,"language":2380,"meta":7,"className":2540},"// Nuxt 4 大幅改进了热更新体验\n\n// 1. 更快的 HMR\n// - 组件变更：\u003C 100ms\n// - 页面变更：\u003C 200ms\n// - 配置变更：\u003C 1s\n\n// 2. 保持状态的更新\n// composables 更新不再丢失组件状态\nconst count = ref(0);  // 更新文件后，值保持\n\n// 3. 错误恢复\n// 修复语法错误后自动恢复，无需重启\n",[2382],[2542],{"type":27,"tag":562,"props":2543,"children":2544},{"__ignoreMap":7},[2545],{"type":32,"value":2539},{"type":27,"tag":754,"props":2547,"children":2549},{"id":2548},"_43-错误处理增强",[2550],{"type":32,"value":2551},"4.3 错误处理增强",{"type":27,"tag":2342,"props":2553,"children":2558},{"code":2554,"language":2555,"meta":7,"className":2556},"\u003C!-- app/error.vue - 增强的错误页面 -->\n\u003Ctemplate>\n  \u003Cdiv class=\"error-page\">\n    \u003Ch1>{{ error.statusCode }}\u003C/h1>\n    \u003Cp>{{ error.message }}\u003C/p>\n    \n    \u003C!-- Nuxt 4 新增：错误堆栈（开发环境） -->\n    \u003Cpre v-if=\"isDev && error.stack\">{{ error.stack }}\u003C/pre>\n    \n    \u003C!-- 新增：错误上下文 -->\n    \u003Cdetails v-if=\"error.data\">\n      \u003Csummary>详细信息\u003C/summary>\n      \u003Cpre>{{ error.data }}\u003C/pre>\n    \u003C/details>\n    \n    \u003Cbutton @click=\"handleError\">重试\u003C/button>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  error: {\n    statusCode: number\n    message: string\n    stack?: string\n    data?: Record\u003Cstring, unknown>\n  }\n}>();\n\nconst isDev = process.dev;\n\nfunction handleError() {\n  clearError({ redirect: '/' });\n}\n\u003C/script>\n","vue",[2557],"language-vue",[2559],{"type":27,"tag":562,"props":2560,"children":2561},{"__ignoreMap":7},[2562],{"type":32,"value":2554},{"type":27,"tag":2342,"props":2564,"children":2567},{"code":2565,"language":2380,"meta":7,"className":2566},"// server/api/users.ts - 增强的服务端错误\n\nexport default defineEventHandler((event) => {\n  const id = getRouterParam(event, 'id');\n  \n  if (!id) {\n    throw createError({\n      statusCode: 400,\n      message: '缺少用户 ID',\n      \n      // Nuxt 4 新增：结构化错误数据\n      data: {\n        field: 'id',\n        constraint: 'required'\n      }\n    });\n  }\n  \n  // 业务错误\n  throw createError({\n    statusCode: 404,\n    message: '用户不存在',\n    data: {\n      userId: id,\n      suggestion: '请检查用户 ID 是否正确'\n    }\n  });\n});\n",[2382],[2568],{"type":27,"tag":562,"props":2569,"children":2570},{"__ignoreMap":7},[2571],{"type":32,"value":2565},{"type":27,"tag":70,"props":2573,"children":2575},{"id":2574},"第五部分性能优化特性",[2576],{"type":32,"value":2577},"第五部分：性能优化特性",{"type":27,"tag":754,"props":2579,"children":2581},{"id":2580},"_51-更智能的代码分割",[2582],{"type":32,"value":2583},"5.1 更智能的代码分割",{"type":27,"tag":2342,"props":2585,"children":2588},{"code":2586,"language":2380,"meta":7,"className":2587},"// Nuxt 4 的自动代码分割更加智能\n\n// 自动路由分割\n// pages/dashboard/\n//   index.vue      -> chunks/dashboard.js\n//   settings.vue   -> chunks/dashboard-settings.js\n//   analytics.vue  -> chunks/dashboard-analytics.js\n\n// 组件级分割\n// components/\n//   HeavyChart.vue -> chunks/heavy-chart.js (自动延迟加载)\n\n// 手动优化\nexport default defineNuxtConfig({\n  vite: {\n    build: {\n      rollupOptions: {\n        output: {\n          // 自定义分块策略\n          manualChunks: {\n            'vendor-vue': ['vue', 'vue-router', 'pinia'],\n            'vendor-ui': ['element-plus']\n          }\n        }\n      }\n    }\n  }\n});\n",[2382],[2589],{"type":27,"tag":562,"props":2590,"children":2591},{"__ignoreMap":7},[2592],{"type":32,"value":2586},{"type":27,"tag":754,"props":2594,"children":2596},{"id":2595},"_52-图片优化增强",[2597],{"type":32,"value":2598},"5.2 图片优化增强",{"type":27,"tag":2342,"props":2600,"children":2603},{"code":2601,"language":2555,"meta":7,"className":2602},"\u003C!-- Nuxt 4 的 nuxt-img 增强 -->\n\u003Ctemplate>\n  \u003CNuxtImg\n    src=\"/images/hero.jpg\"\n    \n    \u003C!-- 新增：自动格式选择 -->\n    format=\"webp,avif\"\n    \n    \u003C!-- 新增：艺术指导响应式 -->\n    :sources=\"[\n      { media: '(max-width: 640px)', src: '/images/hero-mobile.jpg' },\n      { media: '(max-width: 1024px)', src: '/images/hero-tablet.jpg' }\n    ]\"\n    \n    \u003C!-- 新增：模糊占位符 -->\n    placeholder=\"/images/hero-blur.jpg\"\n    \n    \u003C!-- 新增：性能提示 -->\n    :priority=\"true\"\n    fetchpriority=\"high\"\n  />\n\u003C/template>\n\n\u003Cscript setup>\n// 编程式使用\nconst img = useImage();\n\n// 生成优化后的 URL\nconst optimizedUrl = img('/images/photo.jpg', {\n  width: 800,\n  height: 600,\n  format: 'webp',\n  quality: 80\n});\n\u003C/script>\n",[2557],[2604],{"type":27,"tag":562,"props":2605,"children":2606},{"__ignoreMap":7},[2607],{"type":32,"value":2601},{"type":27,"tag":754,"props":2609,"children":2611},{"id":2610},"_53-服务端渲染优化",[2612],{"type":32,"value":2613},"5.3 服务端渲染优化",{"type":27,"tag":2342,"props":2615,"children":2618},{"code":2616,"language":2380,"meta":7,"className":2617},"// Nuxt 4 SSR 性能优化\n\n// 1. 流式 SSR\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  nitro: {\n    // 启用流式 SSR\n    experimental: {\n      wasm: true\n    }\n  },\n  \n  // 组件流式渲染\n  experimental: {\n    componentIslands: true,  // 组件岛\n    payloadExtraction: true  // Payload 提取\n  }\n});\n\n// 2. 选择性 Hydration\n// pages/article/[id].vue\n\u003Ctemplate>\n  \u003Carticle>\n    \u003C!-- 静态内容，不需要 hydration -->\n    \u003CNuxtIsland name=\"ArticleContent\" :props=\"{ content }\" />\n    \n    \u003C!-- 需要交互的部分 -->\n    \u003CCommentSection :articleId=\"id\" />\n  \u003C/article>\n\u003C/template>\n\n// 3. 预加载优化\n\u003Cscript setup>\n// 智能预加载\nconst { data } = await useAsyncData('article', () => $fetch('/api/article/' + id), {\n  // 预加载相关数据\n  preload: [\n    () => $fetch('/api/comments/' + id),\n    () => $fetch('/api/related/' + id)\n  ]\n});\n\u003C/script>\n",[2382],[2619],{"type":27,"tag":562,"props":2620,"children":2621},{"__ignoreMap":7},[2622],{"type":32,"value":2616},{"type":27,"tag":70,"props":2624,"children":2626},{"id":2625},"第六部分模块生态更新",[2627],{"type":32,"value":2628},"第六部分：模块生态更新",{"type":27,"tag":754,"props":2630,"children":2632},{"id":2631},"_61-官方模块适配",[2633],{"type":32,"value":2634},"6.1 官方模块适配",{"type":27,"tag":2342,"props":2636,"children":2639},{"code":2637,"language":2380,"meta":7,"className":2638},"// 主要官方模块的 Nuxt 4 兼容版本\n\n// @nuxtjs/i18n v9\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/i18n'],\n  \n  i18n: {\n    // 新增：编译时优化\n    bundle: {\n      optimizeTranslations: true\n    },\n    \n    // 新增：类型生成\n    types: 'composition'\n  }\n});\n\n// @nuxt/content v3\nexport default defineNuxtConfig({\n  modules: ['@nuxt/content'],\n  \n  content: {\n    // 新增：更强的查询 API\n    experimental: {\n      clientDB: true,\n      stripQueryParameters: true\n    }\n  }\n});\n\n// @pinia/nuxt v0.6\nexport default defineNuxtConfig({\n  modules: ['@pinia/nuxt'],\n  \n  pinia: {\n    // 新增：自动导入优化\n    storesDirs: ['./stores/**']\n  }\n});\n",[2382],[2640],{"type":27,"tag":562,"props":2641,"children":2642},{"__ignoreMap":7},[2643],{"type":32,"value":2637},{"type":27,"tag":754,"props":2645,"children":2647},{"id":2646},"_62-创建-nuxt-4-兼容模块",[2648],{"type":32,"value":2649},"6.2 创建 Nuxt 4 兼容模块",{"type":27,"tag":2342,"props":2651,"children":2654},{"code":2652,"language":2380,"meta":7,"className":2653},"// 模块开发的新约定\n\n// my-module/src/module.ts\nimport { defineNuxtModule, createResolver } from '@nuxt/kit'\n\nexport default defineNuxtModule({\n  meta: {\n    name: 'my-module',\n    configKey: 'myModule',\n    \n    // Nuxt 4 要求\n    compatibility: {\n      nuxt: '^4.0.0'\n    }\n  },\n  \n  defaults: {\n    enabled: true\n  },\n  \n  setup(options, nuxt) {\n    const resolver = createResolver(import.meta.url);\n    \n    // 使用新的 hook API\n    nuxt.hook('app:resolve', (app) => {\n      // app 配置\n    });\n    \n    // 添加运行时插件\n    addPlugin(resolver.resolve('./runtime/plugin'));\n    \n    // 添加组件\n    addComponentsDir({\n      path: resolver.resolve('./runtime/components'),\n      prefix: 'MyModule'\n    });\n  }\n});\n",[2382],[2655],{"type":27,"tag":562,"props":2656,"children":2657},{"__ignoreMap":7},[2658],{"type":32,"value":2652},{"type":27,"tag":70,"props":2660,"children":2662},{"id":2661},"第七部分迁移准备",[2663],{"type":32,"value":2664},"第七部分：迁移准备",{"type":27,"tag":754,"props":2666,"children":2668},{"id":2667},"_71-兼容性检查清单",[2669],{"type":32,"value":2670},"7.1 兼容性检查清单",{"type":27,"tag":2342,"props":2672,"children":2676},{"code":2673,"language":510,"meta":7,"className":2674},"## Nuxt 4 迁移检查清单\n\n### 依赖版本\n- [ ] Node.js >= 20\n- [ ] Vue >= 3.4\n- [ ] TypeScript >= 5.3（推荐）\n\n### 代码检查\n- [ ] 移除已废弃的 API 调用\n- [ ] 更新 composables 导入路径\n- [ ] 检查 useAsyncData 用法\n- [ ] 审查中间件语法\n\n### 目录结构\n- [ ] 决定是否采用新目录结构\n- [ ] 移动文件到 app/ 目录（如果采用）\n- [ ] 更新 nuxt.config.ts 配置\n\n### 模块更新\n- [ ] 更新官方模块到兼容版本\n- [ ] 检查第三方模块兼容性\n- [ ] 更新自定义模块\n\n### 测试\n- [ ] 运行全部测试套件\n- [ ] 验证 SSR/SSG 输出\n- [ ] 检查 hydration 错误\n- [ ] 性能基准测试\n",[2675],"language-markdown",[2677],{"type":27,"tag":562,"props":2678,"children":2679},{"__ignoreMap":7},[2680],{"type":32,"value":2673},{"type":27,"tag":754,"props":2682,"children":2684},{"id":2683},"_72-渐进式升级路径",[2685],{"type":32,"value":2686},"7.2 渐进式升级路径",{"type":27,"tag":2342,"props":2688,"children":2691},{"code":2689,"language":2380,"meta":7,"className":2690},"// 使用 compatibilityVersion 实现渐进升级\n\n// 阶段 1：启用 Nuxt 4 特性（保持旧目录结构）\nexport default defineNuxtConfig({\n  future: {\n    compatibilityVersion: 4\n  },\n  srcDir: './'  // 保持旧目录结构\n});\n\n// 阶段 2：迁移到新目录结构\n// 1. 创建 app/ 目录\n// 2. 移动文件\n// 3. 更新导入路径\n\n// 阶段 3：完全升级\nexport default defineNuxtConfig({\n  // 移除 future 配置，默认使用 Nuxt 4 行为\n});\n",[2382],[2692],{"type":27,"tag":562,"props":2693,"children":2694},{"__ignoreMap":7},[2695],{"type":32,"value":2689},{"type":27,"tag":70,"props":2697,"children":2699},{"id":2698},"结语稳步前进的进化",[2700],{"type":32,"value":2701},"结语：稳步前进的进化",{"type":27,"tag":28,"props":2703,"children":2704},{},[2705],{"type":32,"value":2706},"Nuxt 4 不是一次颠覆性的重写，而是在 Nuxt 3 坚实基础上的持续改进。新的目录结构带来更好的组织性，Nitro 2.0 带来更好的性能，增强的类型系统带来更好的开发体验。",{"type":27,"tag":28,"props":2708,"children":2709},{},[2710],{"type":32,"value":2711},"对于 Nuxt 3 用户来说，升级路径相对平滑。核心概念没有变化，熟悉的 API 依然工作。Nuxt 团队显然吸取了 Nuxt 2 到 Nuxt 3 升级的经验，这次提供了更友好的迁移体验。",{"type":27,"tag":28,"props":2713,"children":2714},{},[2715],{"type":32,"value":2716},"如果你正在考虑是否升级，建议：",{"type":27,"tag":35,"props":2718,"children":2719},{},[2720,2725,2730],{"type":27,"tag":39,"props":2721,"children":2722},{},[2723],{"type":32,"value":2724},"新项目直接使用 Nuxt 4",{"type":27,"tag":39,"props":2726,"children":2727},{},[2728],{"type":32,"value":2729},"现有项目评估迁移成本后决定",{"type":27,"tag":39,"props":2731,"children":2732},{},[2733],{"type":32,"value":2734},"关注官方迁移指南的更新",{"type":27,"tag":625,"props":2736,"children":2737},{},[],{"type":27,"tag":70,"props":2739,"children":2741},{"id":2740},"参考资源",[2742],{"type":32,"value":2740},{"type":27,"tag":35,"props":2744,"children":2745},{},[2746,2757,2767,2777],{"type":27,"tag":39,"props":2747,"children":2748},{},[2749],{"type":27,"tag":473,"props":2750,"children":2754},{"href":2751,"rel":2752},"https://nuxt.com/blog/v4",[2753],"nofollow",[2755],{"type":32,"value":2756},"Nuxt 4 官方公告",{"type":27,"tag":39,"props":2758,"children":2759},{},[2760],{"type":27,"tag":473,"props":2761,"children":2764},{"href":2762,"rel":2763},"https://nuxt.com/docs/migration/upgrade",[2753],[2765],{"type":32,"value":2766},"Nuxt 4 迁移指南",{"type":27,"tag":39,"props":2768,"children":2769},{},[2770],{"type":27,"tag":473,"props":2771,"children":2774},{"href":2772,"rel":2773},"https://nitro.unjs.io/changelog",[2753],[2775],{"type":32,"value":2776},"Nitro 2.0 更新日志",{"type":27,"tag":39,"props":2778,"children":2779},{},[2780],{"type":27,"tag":473,"props":2781,"children":2784},{"href":2782,"rel":2783},"https://github.com/nuxt/nuxt/issues",[2753],[2785],{"type":32,"value":2786},"Nuxt 路线图",{"title":7,"searchDepth":498,"depth":498,"links":2788},[2789,2790,2791,2796,2801,2806,2811,2816,2820,2824,2825],{"id":2304,"depth":501,"text":2307},{"id":2310,"depth":501,"text":2313},{"id":2326,"depth":501,"text":2329,"children":2792},[2793,2794,2795],{"id":2332,"depth":498,"text":2335},{"id":2368,"depth":498,"text":2371},{"id":2390,"depth":498,"text":2393},{"id":2405,"depth":501,"text":2408,"children":2797},[2798,2799,2800],{"id":2411,"depth":498,"text":2414},{"id":2431,"depth":498,"text":2434},{"id":2446,"depth":498,"text":2449},{"id":2461,"depth":501,"text":2464,"children":2802},[2803,2804,2805],{"id":2467,"depth":498,"text":2470},{"id":2482,"depth":498,"text":2485},{"id":2497,"depth":498,"text":2500},{"id":2512,"depth":501,"text":2515,"children":2807},[2808,2809,2810],{"id":2518,"depth":498,"text":2521},{"id":2533,"depth":498,"text":2536},{"id":2548,"depth":498,"text":2551},{"id":2574,"depth":501,"text":2577,"children":2812},[2813,2814,2815],{"id":2580,"depth":498,"text":2583},{"id":2595,"depth":498,"text":2598},{"id":2610,"depth":498,"text":2613},{"id":2625,"depth":501,"text":2628,"children":2817},[2818,2819],{"id":2631,"depth":498,"text":2634},{"id":2646,"depth":498,"text":2649},{"id":2661,"depth":501,"text":2664,"children":2821},[2822,2823],{"id":2667,"depth":498,"text":2670},{"id":2683,"depth":498,"text":2686},{"id":2698,"depth":501,"text":2701},{"id":2740,"depth":501,"text":2740},"content:topics:nuxt:nuxt4-major-updates-overview.md","topics/nuxt/nuxt4-major-updates-overview.md","topics/nuxt/nuxt4-major-updates-overview",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":2830,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":2831,"_type":510,"_id":511,"_source":512,"_file":513,"_stem":514,"_extension":515},[13,14,15,16,17],{"type":24,"children":2832,"toc":3208},[2833,2837,2856,2860,2864,2868,2872,2891,2895,2899,2903,2907,2922,2926,2941,2945,2956,2960,2964,2968,2983,2987,2991,2995,2999,3018,3022,3037,3041,3045,3049,3053,3064,3068,3072,3076,3095,3099,3103,3107,3122,3126,3141,3145,3149,3172,3176,3180,3184],{"type":27,"tag":28,"props":2834,"children":2835},{},[2836],{"type":32,"value":33},{"type":27,"tag":35,"props":2838,"children":2839},{},[2840,2844,2848,2852],{"type":27,"tag":39,"props":2841,"children":2842},{},[2843],{"type":32,"value":43},{"type":27,"tag":39,"props":2845,"children":2846},{},[2847],{"type":32,"value":48},{"type":27,"tag":39,"props":2849,"children":2850},{},[2851],{"type":32,"value":53},{"type":27,"tag":39,"props":2853,"children":2854},{},[2855],{"type":32,"value":58},{"type":27,"tag":28,"props":2857,"children":2858},{},[2859],{"type":32,"value":63},{"type":27,"tag":28,"props":2861,"children":2862},{},[2863],{"type":32,"value":68},{"type":27,"tag":70,"props":2865,"children":2866},{"id":72},[2867],{"type":32,"value":72},{"type":27,"tag":28,"props":2869,"children":2870},{},[2871],{"type":32,"value":79},{"type":27,"tag":35,"props":2873,"children":2874},{},[2875,2879,2883,2887],{"type":27,"tag":39,"props":2876,"children":2877},{},[2878],{"type":32,"value":87},{"type":27,"tag":39,"props":2880,"children":2881},{},[2882],{"type":32,"value":92},{"type":27,"tag":39,"props":2884,"children":2885},{},[2886],{"type":32,"value":97},{"type":27,"tag":39,"props":2888,"children":2889},{},[2890],{"type":32,"value":102},{"type":27,"tag":28,"props":2892,"children":2893},{},[2894],{"type":32,"value":107},{"type":27,"tag":70,"props":2896,"children":2897},{"id":110},[2898],{"type":32,"value":113},{"type":27,"tag":28,"props":2900,"children":2901},{},[2902],{"type":32,"value":118},{"type":27,"tag":28,"props":2904,"children":2905},{},[2906],{"type":32,"value":123},{"type":27,"tag":35,"props":2908,"children":2909},{},[2910,2914,2918],{"type":27,"tag":39,"props":2911,"children":2912},{},[2913],{"type":32,"value":131},{"type":27,"tag":39,"props":2915,"children":2916},{},[2917],{"type":32,"value":136},{"type":27,"tag":39,"props":2919,"children":2920},{},[2921],{"type":32,"value":141},{"type":27,"tag":28,"props":2923,"children":2924},{},[2925],{"type":32,"value":146},{"type":27,"tag":35,"props":2927,"children":2928},{},[2929,2933,2937],{"type":27,"tag":39,"props":2930,"children":2931},{},[2932],{"type":32,"value":154},{"type":27,"tag":39,"props":2934,"children":2935},{},[2936],{"type":32,"value":159},{"type":27,"tag":39,"props":2938,"children":2939},{},[2940],{"type":32,"value":164},{"type":27,"tag":28,"props":2942,"children":2943},{},[2944],{"type":32,"value":169},{"type":27,"tag":35,"props":2946,"children":2947},{},[2948,2952],{"type":27,"tag":39,"props":2949,"children":2950},{},[2951],{"type":32,"value":177},{"type":27,"tag":39,"props":2953,"children":2954},{},[2955],{"type":32,"value":182},{"type":27,"tag":70,"props":2957,"children":2958},{"id":185},[2959],{"type":32,"value":188},{"type":27,"tag":28,"props":2961,"children":2962},{},[2963],{"type":32,"value":193},{"type":27,"tag":28,"props":2965,"children":2966},{},[2967],{"type":32,"value":198},{"type":27,"tag":35,"props":2969,"children":2970},{},[2971,2975,2979],{"type":27,"tag":39,"props":2972,"children":2973},{},[2974],{"type":32,"value":206},{"type":27,"tag":39,"props":2976,"children":2977},{},[2978],{"type":32,"value":211},{"type":27,"tag":39,"props":2980,"children":2981},{},[2982],{"type":32,"value":216},{"type":27,"tag":28,"props":2984,"children":2985},{},[2986],{"type":32,"value":221},{"type":27,"tag":70,"props":2988,"children":2989},{"id":224},[2990],{"type":32,"value":227},{"type":27,"tag":28,"props":2992,"children":2993},{},[2994],{"type":32,"value":232},{"type":27,"tag":28,"props":2996,"children":2997},{},[2998],{"type":32,"value":237},{"type":27,"tag":35,"props":3000,"children":3001},{},[3002,3006,3010,3014],{"type":27,"tag":39,"props":3003,"children":3004},{},[3005],{"type":32,"value":245},{"type":27,"tag":39,"props":3007,"children":3008},{},[3009],{"type":32,"value":250},{"type":27,"tag":39,"props":3011,"children":3012},{},[3013],{"type":32,"value":255},{"type":27,"tag":39,"props":3015,"children":3016},{},[3017],{"type":32,"value":260},{"type":27,"tag":28,"props":3019,"children":3020},{},[3021],{"type":32,"value":265},{"type":27,"tag":35,"props":3023,"children":3024},{},[3025,3029,3033],{"type":27,"tag":39,"props":3026,"children":3027},{},[3028],{"type":32,"value":273},{"type":27,"tag":39,"props":3030,"children":3031},{},[3032],{"type":32,"value":278},{"type":27,"tag":39,"props":3034,"children":3035},{},[3036],{"type":32,"value":283},{"type":27,"tag":28,"props":3038,"children":3039},{},[3040],{"type":32,"value":288},{"type":27,"tag":70,"props":3042,"children":3043},{"id":291},[3044],{"type":32,"value":291},{"type":27,"tag":28,"props":3046,"children":3047},{},[3048],{"type":32,"value":298},{"type":27,"tag":28,"props":3050,"children":3051},{},[3052],{"type":32,"value":303},{"type":27,"tag":35,"props":3054,"children":3055},{},[3056,3060],{"type":27,"tag":39,"props":3057,"children":3058},{},[3059],{"type":32,"value":311},{"type":27,"tag":39,"props":3061,"children":3062},{},[3063],{"type":32,"value":316},{"type":27,"tag":28,"props":3065,"children":3066},{},[3067],{"type":32,"value":321},{"type":27,"tag":70,"props":3069,"children":3070},{"id":324},[3071],{"type":32,"value":327},{"type":27,"tag":28,"props":3073,"children":3074},{},[3075],{"type":32,"value":332},{"type":27,"tag":35,"props":3077,"children":3078},{},[3079,3083,3087,3091],{"type":27,"tag":39,"props":3080,"children":3081},{},[3082],{"type":32,"value":340},{"type":27,"tag":39,"props":3084,"children":3085},{},[3086],{"type":32,"value":345},{"type":27,"tag":39,"props":3088,"children":3089},{},[3090],{"type":32,"value":350},{"type":27,"tag":39,"props":3092,"children":3093},{},[3094],{"type":32,"value":355},{"type":27,"tag":28,"props":3096,"children":3097},{},[3098],{"type":32,"value":360},{"type":27,"tag":70,"props":3100,"children":3101},{"id":363},[3102],{"type":32,"value":366},{"type":27,"tag":28,"props":3104,"children":3105},{},[3106],{"type":32,"value":371},{"type":27,"tag":35,"props":3108,"children":3109},{},[3110,3114,3118],{"type":27,"tag":39,"props":3111,"children":3112},{},[3113],{"type":32,"value":379},{"type":27,"tag":39,"props":3115,"children":3116},{},[3117],{"type":32,"value":384},{"type":27,"tag":39,"props":3119,"children":3120},{},[3121],{"type":32,"value":389},{"type":27,"tag":28,"props":3123,"children":3124},{},[3125],{"type":32,"value":394},{"type":27,"tag":35,"props":3127,"children":3128},{},[3129,3133,3137],{"type":27,"tag":39,"props":3130,"children":3131},{},[3132],{"type":32,"value":402},{"type":27,"tag":39,"props":3134,"children":3135},{},[3136],{"type":32,"value":407},{"type":27,"tag":39,"props":3138,"children":3139},{},[3140],{"type":32,"value":412},{"type":27,"tag":28,"props":3142,"children":3143},{},[3144],{"type":32,"value":417},{"type":27,"tag":70,"props":3146,"children":3147},{"id":420},[3148],{"type":32,"value":420},{"type":27,"tag":35,"props":3150,"children":3151},{},[3152,3156,3160,3164,3168],{"type":27,"tag":39,"props":3153,"children":3154},{},[3155],{"type":32,"value":430},{"type":27,"tag":39,"props":3157,"children":3158},{},[3159],{"type":32,"value":435},{"type":27,"tag":39,"props":3161,"children":3162},{},[3163],{"type":32,"value":440},{"type":27,"tag":39,"props":3165,"children":3166},{},[3167],{"type":32,"value":445},{"type":27,"tag":39,"props":3169,"children":3170},{},[3171],{"type":32,"value":450},{"type":27,"tag":70,"props":3173,"children":3174},{"id":453},[3175],{"type":32,"value":453},{"type":27,"tag":28,"props":3177,"children":3178},{},[3179],{"type":32,"value":460},{"type":27,"tag":28,"props":3181,"children":3182},{},[3183],{"type":32,"value":465},{"type":27,"tag":35,"props":3185,"children":3186},{},[3187,3194,3201],{"type":27,"tag":39,"props":3188,"children":3189},{},[3190],{"type":27,"tag":473,"props":3191,"children":3192},{"href":475},[3193],{"type":32,"value":478},{"type":27,"tag":39,"props":3195,"children":3196},{},[3197],{"type":27,"tag":473,"props":3198,"children":3199},{"href":484},[3200],{"type":32,"value":487},{"type":27,"tag":39,"props":3202,"children":3203},{},[3204],{"type":27,"tag":473,"props":3205,"children":3206},{"href":493},[3207],{"type":32,"value":496},{"title":7,"searchDepth":498,"depth":498,"links":3209},[3210,3211,3212,3213,3214,3215,3216,3217,3218],{"id":72,"depth":501,"text":72},{"id":110,"depth":501,"text":113},{"id":185,"depth":501,"text":188},{"id":224,"depth":501,"text":227},{"id":291,"depth":501,"text":291},{"id":324,"depth":501,"text":327},{"id":363,"depth":501,"text":366},{"id":420,"depth":501,"text":420},{"id":453,"depth":501,"text":453},1776916088253]