[{"data":1,"prerenderedAt":727},["ShallowReactive",2],{"toc-zh-\u002Fadvanced\u002Fssr-prefetch":3,"page-zh-\u002Fadvanced\u002Fssr-prefetch":431},{"id":4,"title":5,"body":6,"description":424,"extension":425,"meta":426,"navigation":276,"path":427,"seo":428,"stem":429,"__hash__":430},"content_zh\u002Fadvanced\u002Fssr-prefetch.md","SSR 预取",{"type":7,"value":8,"toc":415},"minimark",[9,17,22,25,36,47,50,56,59,205,208,211,344,347,358,361,368,371,377,380,411],[10,11,12,16],"p",{},[13,14,15],"strong",{},"本章目标","：理解 SSR 预取的工作原理，配置需要预取的字典类型以优化首屏性能。",[18,19,21],"h2",{"id":20},"为什么需要预取","为什么需要预取？",[10,23,24],{},"默认流程：",[26,27,32],"pre",{"className":28,"code":30,"language":31},[29],"language-text","浏览器显示 HTML → Vue 接管（hydration）\n  → useDict 在 onMounted 中发起请求 → 数据加载 → 更新页面\n","text",[33,34,30],"code",{"__ignoreMap":35},"",[10,37,38,39,42,43,46],{},"问题：hydration 到数据加载完成之间，用户会看到 ",[13,40,41],{},"loading 状态","或",[13,44,45],{},"code 原文","。",[10,48,49],{},"启用预取后：",[26,51,54],{"className":52,"code":53,"language":31},[29],"服务端渲染 HTML\n  → 同时：服务端预取字典数据，注入 HTML payload\n    → 浏览器直接看到翻译后的文字\n      → Vue 接管，从 payload 读取数据到内存缓存\n",[33,55,53],{"__ignoreMap":35},[18,57,58],{"id":58},"配置预取",[26,60,65],{"className":61,"code":62,"filename":63,"language":64,"meta":35,"style":35},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@lacqjs\u002Fnuxt-dict'],\n  dict: {\n    ssr: {\n      prefetch: ['gender', 'status', 'industry'],\n    },\n  },\n});\n","nuxt.config.ts","ts",[33,66,67,91,119,130,140,181,187,193],{"__ignoreMap":35},[68,69,72,76,79,83,87],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"s7zQu","export",[68,77,78],{"class":74}," default",[68,80,82],{"class":81},"s2Zo4"," defineNuxtConfig",[68,84,86],{"class":85},"sTEyZ","(",[68,88,90],{"class":89},"sMK4o","{\n",[68,92,94,98,101,104,107,111,113,116],{"class":70,"line":93},2,[68,95,97],{"class":96},"swJcz","  modules",[68,99,100],{"class":89},":",[68,102,103],{"class":85}," [",[68,105,106],{"class":89},"'",[68,108,110],{"class":109},"sfazB","@lacqjs\u002Fnuxt-dict",[68,112,106],{"class":89},[68,114,115],{"class":85},"]",[68,117,118],{"class":89},",\n",[68,120,122,125,127],{"class":70,"line":121},3,[68,123,124],{"class":96},"  dict",[68,126,100],{"class":89},[68,128,129],{"class":89}," {\n",[68,131,133,136,138],{"class":70,"line":132},4,[68,134,135],{"class":96},"    ssr",[68,137,100],{"class":89},[68,139,129],{"class":89},[68,141,143,146,148,150,152,155,157,160,163,166,168,170,172,175,177,179],{"class":70,"line":142},5,[68,144,145],{"class":96},"      prefetch",[68,147,100],{"class":89},[68,149,103],{"class":85},[68,151,106],{"class":89},[68,153,154],{"class":109},"gender",[68,156,106],{"class":89},[68,158,159],{"class":89},",",[68,161,162],{"class":89}," '",[68,164,165],{"class":109},"status",[68,167,106],{"class":89},[68,169,159],{"class":89},[68,171,162],{"class":89},[68,173,174],{"class":109},"industry",[68,176,106],{"class":89},[68,178,115],{"class":85},[68,180,118],{"class":89},[68,182,184],{"class":70,"line":183},6,[68,185,186],{"class":89},"    },\n",[68,188,190],{"class":70,"line":189},7,[68,191,192],{"class":89},"  },\n",[68,194,196,199,202],{"class":70,"line":195},8,[68,197,198],{"class":89},"}",[68,200,201],{"class":85},")",[68,203,204],{"class":89},";\n",[18,206,207],{"id":207},"预取与按需加载的配合",[10,209,210],{},"预取是\"首屏必需的数据提前拉\"，不是全量加载：",[26,212,216],{"className":213,"code":214,"language":215,"meta":35,"style":35},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003C!-- gender \u002F industry 在 prefetch 中 → 首屏直接显示翻译 -->\n  \u003Cp>性别：{{ $dict.translate('gender', user.gender) }}\u003C\u002Fp>\n  \u003Cp>行业：{{ $dict.translate('industry', user.industry) }}\u003C\u002Fp>\n\n  \u003C!-- detail_type 不在 prefetch 中 → 按需加载 -->\n  \u003Cdiv v-if=\"showDetail\">\n    \u003Cp>详情：{{ $dict.translate('detail_type', item.type) }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[33,217,218,229,235,255,272,278,283,307,325,335],{"__ignoreMap":35},[68,219,220,223,226],{"class":70,"line":71},[68,221,222],{"class":89},"\u003C",[68,224,225],{"class":96},"template",[68,227,228],{"class":89},">\n",[68,230,231],{"class":70,"line":93},[68,232,234],{"class":233},"sHwdD","  \u003C!-- gender \u002F industry 在 prefetch 中 → 首屏直接显示翻译 -->\n",[68,236,237,240,242,245,248,251,253],{"class":70,"line":121},[68,238,239],{"class":89},"  \u003C",[68,241,10],{"class":96},[68,243,244],{"class":89},">",[68,246,247],{"class":85},"性别：{{ $dict.translate('gender', user.gender) }}",[68,249,250],{"class":89},"\u003C\u002F",[68,252,10],{"class":96},[68,254,228],{"class":89},[68,256,257,259,261,263,266,268,270],{"class":70,"line":132},[68,258,239],{"class":89},[68,260,10],{"class":96},[68,262,244],{"class":89},[68,264,265],{"class":85},"行业：{{ $dict.translate('industry', user.industry) }}",[68,267,250],{"class":89},[68,269,10],{"class":96},[68,271,228],{"class":89},[68,273,274],{"class":70,"line":142},[68,275,277],{"emptyLinePlaceholder":276},true,"\n",[68,279,280],{"class":70,"line":183},[68,281,282],{"class":233},"  \u003C!-- detail_type 不在 prefetch 中 → 按需加载 -->\n",[68,284,285,287,290,294,297,300,303,305],{"class":70,"line":189},[68,286,239],{"class":89},[68,288,289],{"class":96},"div",[68,291,293],{"class":292},"spNyl"," v-if",[68,295,296],{"class":89},"=",[68,298,299],{"class":89},"\"",[68,301,302],{"class":109},"showDetail",[68,304,299],{"class":89},[68,306,228],{"class":89},[68,308,309,312,314,316,319,321,323],{"class":70,"line":195},[68,310,311],{"class":89},"    \u003C",[68,313,10],{"class":96},[68,315,244],{"class":89},[68,317,318],{"class":85},"详情：{{ $dict.translate('detail_type', item.type) }}",[68,320,250],{"class":89},[68,322,10],{"class":96},[68,324,228],{"class":89},[68,326,328,331,333],{"class":70,"line":327},9,[68,329,330],{"class":89},"  \u003C\u002F",[68,332,289],{"class":96},[68,334,228],{"class":89},[68,336,338,340,342],{"class":70,"line":337},10,[68,339,250],{"class":89},[68,341,225],{"class":96},[68,343,228],{"class":89},[18,345,346],{"id":346},"预取失败的容错",[10,348,349,350,353,354,357],{},"预取使用 ",[33,351,352],{},"Promise.all"," 并发请求，但",[13,355,356],{},"允许部分失败","。某个字典预取失败只输出警告日志，不阻塞页面，该字典会在客户端按需加载。",[18,359,360],{"id":360},"性能建议",[10,362,363,364,367],{},"只在 ",[33,365,366],{},"prefetch"," 中配置首屏必需的字典类型（通常 3-10 个），不要把全部字典都放进去。",[18,369,370],{"id":370},"注意事项",[372,373,374],"blockquote",{},[10,375,376],{},"预取只在 SSR 模式下生效。纯客户端渲染（SPA）不需要配置。",[18,378,379],{"id":379},"本章你学会了",[381,382,385,395,405],"ul",{"className":383},[384],"contains-task-list",[386,387,390,394],"li",{"className":388},[389],"task-list-item",[391,392],"input",{"disabled":276,"type":393},"checkbox"," 理解 SSR 预取的工作流程",[386,396,398,400,401,404],{"className":397},[389],[391,399],{"disabled":276,"type":393}," 在 ",[33,402,403],{},"dict.ssr.prefetch"," 中配置预取类型",[386,406,408,410],{"className":407},[389],[391,409],{"disabled":276,"type":393}," 知道预取失败不会阻塞页面渲染",[412,413,414],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":35,"searchDepth":93,"depth":93,"links":416},[417,418,419,420,421,422,423],{"id":20,"depth":93,"text":21},{"id":58,"depth":93,"text":58},{"id":207,"depth":93,"text":207},{"id":346,"depth":93,"text":346},{"id":360,"depth":93,"text":360},{"id":370,"depth":93,"text":370},{"id":379,"depth":93,"text":379},"在服务端渲染时预取字典数据，加速首屏展示。","md",{},"\u002Fadvanced\u002Fssr-prefetch",{"title":5,"description":424},"advanced\u002Fssr-prefetch","L_9CrfERKCesTopHmZ8t3TvHcaf5eLZOfHoue7eRwcU",{"id":4,"title":5,"body":432,"description":424,"extension":425,"meta":725,"navigation":276,"path":427,"seo":726,"stem":429,"__hash__":430},{"type":7,"value":433,"toc":716},[434,438,440,442,447,453,455,460,462,562,564,566,672,674,680,682,686,688,692,694,714],[10,435,436,16],{},[13,437,15],{},[18,439,21],{"id":20},[10,441,24],{},[26,443,445],{"className":444,"code":30,"language":31},[29],[33,446,30],{"__ignoreMap":35},[10,448,38,449,42,451,46],{},[13,450,41],{},[13,452,45],{},[10,454,49],{},[26,456,458],{"className":457,"code":53,"language":31},[29],[33,459,53],{"__ignoreMap":35},[18,461,58],{"id":58},[26,463,464],{"className":61,"code":62,"filename":63,"language":64,"meta":35,"style":35},[33,465,466,478,496,504,512,546,550,554],{"__ignoreMap":35},[68,467,468,470,472,474,476],{"class":70,"line":71},[68,469,75],{"class":74},[68,471,78],{"class":74},[68,473,82],{"class":81},[68,475,86],{"class":85},[68,477,90],{"class":89},[68,479,480,482,484,486,488,490,492,494],{"class":70,"line":93},[68,481,97],{"class":96},[68,483,100],{"class":89},[68,485,103],{"class":85},[68,487,106],{"class":89},[68,489,110],{"class":109},[68,491,106],{"class":89},[68,493,115],{"class":85},[68,495,118],{"class":89},[68,497,498,500,502],{"class":70,"line":121},[68,499,124],{"class":96},[68,501,100],{"class":89},[68,503,129],{"class":89},[68,505,506,508,510],{"class":70,"line":132},[68,507,135],{"class":96},[68,509,100],{"class":89},[68,511,129],{"class":89},[68,513,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544],{"class":70,"line":142},[68,515,145],{"class":96},[68,517,100],{"class":89},[68,519,103],{"class":85},[68,521,106],{"class":89},[68,523,154],{"class":109},[68,525,106],{"class":89},[68,527,159],{"class":89},[68,529,162],{"class":89},[68,531,165],{"class":109},[68,533,106],{"class":89},[68,535,159],{"class":89},[68,537,162],{"class":89},[68,539,174],{"class":109},[68,541,106],{"class":89},[68,543,115],{"class":85},[68,545,118],{"class":89},[68,547,548],{"class":70,"line":183},[68,549,186],{"class":89},[68,551,552],{"class":70,"line":189},[68,553,192],{"class":89},[68,555,556,558,560],{"class":70,"line":195},[68,557,198],{"class":89},[68,559,201],{"class":85},[68,561,204],{"class":89},[18,563,207],{"id":207},[10,565,210],{},[26,567,568],{"className":213,"code":214,"language":215,"meta":35,"style":35},[33,569,570,578,582,598,614,618,622,640,656,664],{"__ignoreMap":35},[68,571,572,574,576],{"class":70,"line":71},[68,573,222],{"class":89},[68,575,225],{"class":96},[68,577,228],{"class":89},[68,579,580],{"class":70,"line":93},[68,581,234],{"class":233},[68,583,584,586,588,590,592,594,596],{"class":70,"line":121},[68,585,239],{"class":89},[68,587,10],{"class":96},[68,589,244],{"class":89},[68,591,247],{"class":85},[68,593,250],{"class":89},[68,595,10],{"class":96},[68,597,228],{"class":89},[68,599,600,602,604,606,608,610,612],{"class":70,"line":132},[68,601,239],{"class":89},[68,603,10],{"class":96},[68,605,244],{"class":89},[68,607,265],{"class":85},[68,609,250],{"class":89},[68,611,10],{"class":96},[68,613,228],{"class":89},[68,615,616],{"class":70,"line":142},[68,617,277],{"emptyLinePlaceholder":276},[68,619,620],{"class":70,"line":183},[68,621,282],{"class":233},[68,623,624,626,628,630,632,634,636,638],{"class":70,"line":189},[68,625,239],{"class":89},[68,627,289],{"class":96},[68,629,293],{"class":292},[68,631,296],{"class":89},[68,633,299],{"class":89},[68,635,302],{"class":109},[68,637,299],{"class":89},[68,639,228],{"class":89},[68,641,642,644,646,648,650,652,654],{"class":70,"line":195},[68,643,311],{"class":89},[68,645,10],{"class":96},[68,647,244],{"class":89},[68,649,318],{"class":85},[68,651,250],{"class":89},[68,653,10],{"class":96},[68,655,228],{"class":89},[68,657,658,660,662],{"class":70,"line":327},[68,659,330],{"class":89},[68,661,289],{"class":96},[68,663,228],{"class":89},[68,665,666,668,670],{"class":70,"line":337},[68,667,250],{"class":89},[68,669,225],{"class":96},[68,671,228],{"class":89},[18,673,346],{"id":346},[10,675,349,676,353,678,357],{},[33,677,352],{},[13,679,356],{},[18,681,360],{"id":360},[10,683,363,684,367],{},[33,685,366],{},[18,687,370],{"id":370},[372,689,690],{},[10,691,376],{},[18,693,379],{"id":379},[381,695,697,702,709],{"className":696},[384],[386,698,700,394],{"className":699},[389],[391,701],{"disabled":276,"type":393},[386,703,705,400,707,404],{"className":704},[389],[391,706],{"disabled":276,"type":393},[33,708,403],{},[386,710,712,410],{"className":711},[389],[391,713],{"disabled":276,"type":393},[412,715,414],{},{"title":35,"searchDepth":93,"depth":93,"links":717},[718,719,720,721,722,723,724],{"id":20,"depth":93,"text":21},{"id":58,"depth":93,"text":58},{"id":207,"depth":93,"text":207},{"id":346,"depth":93,"text":346},{"id":360,"depth":93,"text":360},{"id":370,"depth":93,"text":370},{"id":379,"depth":93,"text":379},{},{"title":5,"description":424},1782551379401]