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