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