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