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