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