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