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