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