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