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