[{"data":1,"prerenderedAt":933},["ShallowReactive",2],{"content-/topics/engineering/streaming-ssr-progressive-enhancement-guide":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":5,"tags":11,"author":17,"featured":18,"series":19,"seriesOrder":20,"readingTime":21,"image":22,"body":23,"_type":927,"_id":928,"_source":929,"_file":930,"_stem":931,"_extension":932},"/topics/engineering/streaming-ssr-progressive-enhancement-guide","engineering",false,"","流式 SSR 与 Progressive Enhancement：别让首屏和交互互相伤害","传统 SSR 解决了首屏空白，却不天然解决“等待一切就绪”的迟钝感。本文从用户感知出发，讲清流式 SSR 与渐进增强如何配合工作，何时值得用、怎样落地，以及哪些误区最容易把体验做坏。","2026-04-25",[12,13,14,15,16],"SSR","流式渲染","Progressive Enhancement","前端架构","Web 性能","小明",true,"web-performance-extreme",2,13,"/images/articles/streaming-ssr-progressive-enhancement-guide-cover.jpg",{"type":24,"children":25,"toc":902},"root",[26,34,40,55,60,69,74,79,88,92,99,104,123,128,135,140,158,163,168,173,179,184,192,197,200,206,211,216,224,229,247,252,255,261,266,272,277,300,305,311,316,334,339,345,349,372,377,380,386,392,397,402,640,650,656,661,666,684,689,695,700,703,709,714,719,737,742,760,765,773,776,782,788,793,799,804,810,815,818,824,829,834,842,847,852,855,860,883,888,896],{"type":27,"tag":28,"props":29,"children":31},"element","h1",{"id":30},"流式-ssr-与-progressive-enhancement别让首屏和交互互相伤害",[32],{"type":33,"value":8},"text",{"type":27,"tag":35,"props":36,"children":37},"p",{},[38],{"type":33,"value":39},"前端这几年有个很微妙的悖论：",{"type":27,"tag":41,"props":42,"children":43},"ul",{},[44,50],{"type":27,"tag":45,"props":46,"children":47},"li",{},[48],{"type":33,"value":49},"CSR 时代，大家抱怨首屏白",{"type":27,"tag":45,"props":51,"children":52},{},[53],{"type":33,"value":54},"SSR 时代，大家开始抱怨“首屏看着出来了，但还是不能用”",{"type":27,"tag":35,"props":56,"children":57},{},[58],{"type":33,"value":59},"这说明问题从来不只是“有没有 HTML”，而是：",{"type":27,"tag":61,"props":62,"children":63},"blockquote",{},[64],{"type":27,"tag":35,"props":65,"children":66},{},[67],{"type":33,"value":68},"用户是不是在等待一整套系统全部准备完毕之后，才终于得到一点可操作性？",{"type":27,"tag":35,"props":70,"children":71},{},[72],{"type":33,"value":73},"传统 SSR 的确解决了“浏览器先拿到骨架”的问题，但如果页面必须等到完整数据、完整 JS、完整 hydration 都完成后，用户体验仍然像在排队等叫号。",{"type":27,"tag":35,"props":75,"children":76},{},[77],{"type":33,"value":78},"流式 SSR 和 Progressive Enhancement 之所以重要，不是因为它们新，而是因为它们共同回答了一个产品级问题：",{"type":27,"tag":35,"props":80,"children":81},{},[82],{"type":27,"tag":83,"props":84,"children":85},"strong",{},[86],{"type":33,"value":87},"怎样让页面更早出现，同时更早有用。",{"type":27,"tag":89,"props":90,"children":91},"hr",{},[],{"type":27,"tag":93,"props":94,"children":96},"h2",{"id":95},"_1-先区分三个时间点",[97],{"type":33,"value":98},"1. 先区分三个时间点",{"type":27,"tag":35,"props":100,"children":101},{},[102],{"type":33,"value":103},"很多团队讨论 SSR 时，把所有“快”都混成一件事。其实至少有三件事：",{"type":27,"tag":105,"props":106,"children":107},"ol",{},[108,113,118],{"type":27,"tag":45,"props":109,"children":110},{},[111],{"type":33,"value":112},"什么时候看到内容",{"type":27,"tag":45,"props":114,"children":115},{},[116],{"type":33,"value":117},"什么时候能开始理解内容",{"type":27,"tag":45,"props":119,"children":120},{},[121],{"type":33,"value":122},"什么时候能开始操作内容",{"type":27,"tag":35,"props":124,"children":125},{},[126],{"type":33,"value":127},"流式 SSR 主要改善第 1 件和第 2 件，渐进增强主要改善第 3 件。",{"type":27,"tag":129,"props":130,"children":132},"h3",{"id":131},"_11-传统-ssr-的瓶颈必须等完整才能发车",[133],{"type":33,"value":134},"1.1 传统 SSR 的瓶颈：必须等“完整”才能发车",{"type":27,"tag":35,"props":136,"children":137},{},[138],{"type":33,"value":139},"在很多实现里，服务端会先把整棵页面准备完整：",{"type":27,"tag":41,"props":141,"children":142},{},[143,148,153],{"type":27,"tag":45,"props":144,"children":145},{},[146],{"type":33,"value":147},"数据都拿齐",{"type":27,"tag":45,"props":149,"children":150},{},[151],{"type":33,"value":152},"组件都渲染完",{"type":27,"tag":45,"props":154,"children":155},{},[156],{"type":33,"value":157},"HTML 全部拼好",{"type":27,"tag":35,"props":159,"children":160},{},[161],{"type":33,"value":162},"然后再一次性发送给浏览器。",{"type":27,"tag":35,"props":164,"children":165},{},[166],{"type":33,"value":167},"这看似稳妥，问题是：最慢的那个模块，会拖住整个首屏。",{"type":27,"tag":35,"props":169,"children":170},{},[171],{"type":33,"value":172},"一个推荐位接口慢 800ms，页面主体也得一起陪跑。这就像全班同学因为最后一个人没交作业，整节课都不能下课。",{"type":27,"tag":129,"props":174,"children":176},{"id":175},"_12-流式-ssr-的核心先把能确定的部分发出去",[177],{"type":33,"value":178},"1.2 流式 SSR 的核心：先把能确定的部分发出去",{"type":27,"tag":35,"props":180,"children":181},{},[182],{"type":33,"value":183},"流式渲染的思路很朴素：",{"type":27,"tag":61,"props":185,"children":186},{},[187],{"type":27,"tag":35,"props":188,"children":189},{},[190],{"type":33,"value":191},"先把稳定的壳和关键内容片段发送给浏览器，慢模块稍后补上。",{"type":27,"tag":35,"props":193,"children":194},{},[195],{"type":33,"value":196},"它带来的不是“理论上的极致性能”，而是更诚实的用户感知：页面在持续展开，而不是一直沉默。",{"type":27,"tag":89,"props":198,"children":199},{},[],{"type":27,"tag":93,"props":201,"children":203},{"id":202},"_2-progressive-enhancement-为什么不是复古理念",[204],{"type":33,"value":205},"2. Progressive Enhancement 为什么不是“复古理念”",{"type":27,"tag":35,"props":207,"children":208},{},[209],{"type":33,"value":210},"很多人听到“渐进增强”会想到一套很老派的前端哲学，好像它只适用于低配浏览器。",{"type":27,"tag":35,"props":212,"children":213},{},[214],{"type":33,"value":215},"其实在今天，它更像一种产品纪律：",{"type":27,"tag":61,"props":217,"children":218},{},[219],{"type":27,"tag":35,"props":220,"children":221},{},[222],{"type":33,"value":223},"页面最关键的任务，不能全部押注在 JavaScript 最终成功执行这件事上。",{"type":27,"tag":35,"props":225,"children":226},{},[227],{"type":33,"value":228},"对于现代站点，渐进增强不意味着不用 JS，而是意味着：",{"type":27,"tag":41,"props":230,"children":231},{},[232,237,242],{"type":27,"tag":45,"props":233,"children":234},{},[235],{"type":33,"value":236},"没有 JS 时，核心信息仍然可见",{"type":27,"tag":45,"props":238,"children":239},{},[240],{"type":33,"value":241},"JS 还没准备好时，用户不至于完全卡死",{"type":27,"tag":45,"props":243,"children":244},{},[245],{"type":33,"value":246},"JS 准备好后，再逐步增强交互体验",{"type":27,"tag":35,"props":248,"children":249},{},[250],{"type":33,"value":251},"这不是保守，而是鲁棒性。",{"type":27,"tag":89,"props":253,"children":254},{},[],{"type":27,"tag":93,"props":256,"children":258},{"id":257},"_3-流式-ssr-和渐进增强应该怎么配",[259],{"type":33,"value":260},"3. 流式 SSR 和渐进增强，应该怎么配",{"type":27,"tag":35,"props":262,"children":263},{},[264],{"type":33,"value":265},"一个更现实的页面分层方式是：",{"type":27,"tag":129,"props":267,"children":269},{"id":268},"_31-第一层立即可见的稳定外壳",[270],{"type":33,"value":271},"3.1 第一层：立即可见的稳定外壳",{"type":27,"tag":35,"props":273,"children":274},{},[275],{"type":33,"value":276},"包括：",{"type":27,"tag":41,"props":278,"children":279},{},[280,285,290,295],{"type":27,"tag":45,"props":281,"children":282},{},[283],{"type":33,"value":284},"头部导航",{"type":27,"tag":45,"props":286,"children":287},{},[288],{"type":33,"value":289},"页面标题",{"type":27,"tag":45,"props":291,"children":292},{},[293],{"type":33,"value":294},"核心说明文案",{"type":27,"tag":45,"props":296,"children":297},{},[298],{"type":33,"value":299},"基本布局容器",{"type":27,"tag":35,"props":301,"children":302},{},[303],{"type":33,"value":304},"这部分越早到，用户越早理解“我来到了哪里”。",{"type":27,"tag":129,"props":306,"children":308},{"id":307},"_32-第二层关键任务区优先完成",[309],{"type":33,"value":310},"3.2 第二层：关键任务区优先完成",{"type":27,"tag":35,"props":312,"children":313},{},[314],{"type":33,"value":315},"比如：",{"type":27,"tag":41,"props":317,"children":318},{},[319,324,329],{"type":27,"tag":45,"props":320,"children":321},{},[322],{"type":33,"value":323},"商品详情页的商品图、标题、价格",{"type":27,"tag":45,"props":325,"children":326},{},[327],{"type":33,"value":328},"文章页的标题、摘要、正文",{"type":27,"tag":45,"props":330,"children":331},{},[332],{"type":33,"value":333},"控制台页面的核心表格或图表摘要",{"type":27,"tag":35,"props":335,"children":336},{},[337],{"type":33,"value":338},"这部分决定用户是否开始投入注意力。",{"type":27,"tag":129,"props":340,"children":342},{"id":341},"_33-第三层增强型模块延后到位",[343],{"type":33,"value":344},"3.3 第三层：增强型模块延后到位",{"type":27,"tag":35,"props":346,"children":347},{},[348],{"type":33,"value":276},{"type":27,"tag":41,"props":350,"children":351},{},[352,357,362,367],{"type":27,"tag":45,"props":353,"children":354},{},[355],{"type":33,"value":356},"推荐内容",{"type":27,"tag":45,"props":358,"children":359},{},[360],{"type":33,"value":361},"个性化卡片",{"type":27,"tag":45,"props":363,"children":364},{},[365],{"type":33,"value":366},"非关键评论模块",{"type":27,"tag":45,"props":368,"children":369},{},[370],{"type":33,"value":371},"富交互工具面板",{"type":27,"tag":35,"props":373,"children":374},{},[375],{"type":33,"value":376},"这部分很有价值，但不应该拖累前两层。",{"type":27,"tag":89,"props":378,"children":379},{},[],{"type":27,"tag":93,"props":381,"children":383},{"id":382},"_4-一个够用的落地模式",[384],{"type":33,"value":385},"4. 一个够用的落地模式",{"type":27,"tag":129,"props":387,"children":389},{"id":388},"_41-页面结构上把慢模块显式隔离",[390],{"type":33,"value":391},"4.1 页面结构上，把“慢模块”显式隔离",{"type":27,"tag":35,"props":393,"children":394},{},[395],{"type":33,"value":396},"不要让一个页面内部所有模块都共享同一条等待链。",{"type":27,"tag":35,"props":398,"children":399},{},[400],{"type":33,"value":401},"伪代码可以这样理解：",{"type":27,"tag":403,"props":404,"children":408},"pre",{"className":405,"code":406,"language":407,"meta":7,"style":7},"language-ts shiki shiki-themes github-dark","const criticalDataPromise = getCriticalData()\nconst recommendationPromise = getRecommendations()\n\nconst criticalData = await criticalDataPromise\n\nrenderShell()\nrenderCriticalSection(criticalData)\nstreamPlaceholder('recommendation')\n\nrecommendationPromise.then((data) => {\n  streamRecommendationSection(data)\n})\n","ts",[409],{"type":27,"tag":410,"props":411,"children":412},"code",{"__ignoreMap":7},[413,448,473,482,509,517,530,544,569,577,617,631],{"type":27,"tag":414,"props":415,"children":418},"span",{"class":416,"line":417},"line",1,[419,425,431,436,442],{"type":27,"tag":414,"props":420,"children":422},{"style":421},"--shiki-default:#F97583",[423],{"type":33,"value":424},"const",{"type":27,"tag":414,"props":426,"children":428},{"style":427},"--shiki-default:#79B8FF",[429],{"type":33,"value":430}," criticalDataPromise",{"type":27,"tag":414,"props":432,"children":433},{"style":421},[434],{"type":33,"value":435}," =",{"type":27,"tag":414,"props":437,"children":439},{"style":438},"--shiki-default:#B392F0",[440],{"type":33,"value":441}," getCriticalData",{"type":27,"tag":414,"props":443,"children":445},{"style":444},"--shiki-default:#E1E4E8",[446],{"type":33,"value":447},"()\n",{"type":27,"tag":414,"props":449,"children":450},{"class":416,"line":20},[451,455,460,464,469],{"type":27,"tag":414,"props":452,"children":453},{"style":421},[454],{"type":33,"value":424},{"type":27,"tag":414,"props":456,"children":457},{"style":427},[458],{"type":33,"value":459}," recommendationPromise",{"type":27,"tag":414,"props":461,"children":462},{"style":421},[463],{"type":33,"value":435},{"type":27,"tag":414,"props":465,"children":466},{"style":438},[467],{"type":33,"value":468}," getRecommendations",{"type":27,"tag":414,"props":470,"children":471},{"style":444},[472],{"type":33,"value":447},{"type":27,"tag":414,"props":474,"children":476},{"class":416,"line":475},3,[477],{"type":27,"tag":414,"props":478,"children":479},{"emptyLinePlaceholder":18},[480],{"type":33,"value":481},"\n",{"type":27,"tag":414,"props":483,"children":485},{"class":416,"line":484},4,[486,490,495,499,504],{"type":27,"tag":414,"props":487,"children":488},{"style":421},[489],{"type":33,"value":424},{"type":27,"tag":414,"props":491,"children":492},{"style":427},[493],{"type":33,"value":494}," criticalData",{"type":27,"tag":414,"props":496,"children":497},{"style":421},[498],{"type":33,"value":435},{"type":27,"tag":414,"props":500,"children":501},{"style":421},[502],{"type":33,"value":503}," await",{"type":27,"tag":414,"props":505,"children":506},{"style":444},[507],{"type":33,"value":508}," criticalDataPromise\n",{"type":27,"tag":414,"props":510,"children":512},{"class":416,"line":511},5,[513],{"type":27,"tag":414,"props":514,"children":515},{"emptyLinePlaceholder":18},[516],{"type":33,"value":481},{"type":27,"tag":414,"props":518,"children":520},{"class":416,"line":519},6,[521,526],{"type":27,"tag":414,"props":522,"children":523},{"style":438},[524],{"type":33,"value":525},"renderShell",{"type":27,"tag":414,"props":527,"children":528},{"style":444},[529],{"type":33,"value":447},{"type":27,"tag":414,"props":531,"children":533},{"class":416,"line":532},7,[534,539],{"type":27,"tag":414,"props":535,"children":536},{"style":438},[537],{"type":33,"value":538},"renderCriticalSection",{"type":27,"tag":414,"props":540,"children":541},{"style":444},[542],{"type":33,"value":543},"(criticalData)\n",{"type":27,"tag":414,"props":545,"children":547},{"class":416,"line":546},8,[548,553,558,564],{"type":27,"tag":414,"props":549,"children":550},{"style":438},[551],{"type":33,"value":552},"streamPlaceholder",{"type":27,"tag":414,"props":554,"children":555},{"style":444},[556],{"type":33,"value":557},"(",{"type":27,"tag":414,"props":559,"children":561},{"style":560},"--shiki-default:#9ECBFF",[562],{"type":33,"value":563},"'recommendation'",{"type":27,"tag":414,"props":565,"children":566},{"style":444},[567],{"type":33,"value":568},")\n",{"type":27,"tag":414,"props":570,"children":572},{"class":416,"line":571},9,[573],{"type":27,"tag":414,"props":574,"children":575},{"emptyLinePlaceholder":18},[576],{"type":33,"value":481},{"type":27,"tag":414,"props":578,"children":580},{"class":416,"line":579},10,[581,586,591,596,602,607,612],{"type":27,"tag":414,"props":582,"children":583},{"style":444},[584],{"type":33,"value":585},"recommendationPromise.",{"type":27,"tag":414,"props":587,"children":588},{"style":438},[589],{"type":33,"value":590},"then",{"type":27,"tag":414,"props":592,"children":593},{"style":444},[594],{"type":33,"value":595},"((",{"type":27,"tag":414,"props":597,"children":599},{"style":598},"--shiki-default:#FFAB70",[600],{"type":33,"value":601},"data",{"type":27,"tag":414,"props":603,"children":604},{"style":444},[605],{"type":33,"value":606},") ",{"type":27,"tag":414,"props":608,"children":609},{"style":421},[610],{"type":33,"value":611},"=>",{"type":27,"tag":414,"props":613,"children":614},{"style":444},[615],{"type":33,"value":616}," {\n",{"type":27,"tag":414,"props":618,"children":620},{"class":416,"line":619},11,[621,626],{"type":27,"tag":414,"props":622,"children":623},{"style":438},[624],{"type":33,"value":625},"  streamRecommendationSection",{"type":27,"tag":414,"props":627,"children":628},{"style":444},[629],{"type":33,"value":630},"(data)\n",{"type":27,"tag":414,"props":632,"children":634},{"class":416,"line":633},12,[635],{"type":27,"tag":414,"props":636,"children":637},{"style":444},[638],{"type":33,"value":639},"})\n",{"type":27,"tag":35,"props":641,"children":642},{},[643,645],{"type":33,"value":644},"关键不是语法，而是边界：",{"type":27,"tag":83,"props":646,"children":647},{},[648],{"type":33,"value":649},"重要信息优先闭环，次要模块异步跟进。",{"type":27,"tag":129,"props":651,"children":653},{"id":652},"_42-交互上先保障关键表单和导航",[654],{"type":33,"value":655},"4.2 交互上，先保障关键表单和导航",{"type":27,"tag":35,"props":657,"children":658},{},[659],{"type":33,"value":660},"如果一切交互都必须等全量 hydration 才可用，那流式 SSR 只是让用户更早看到“不可操作的界面”。",{"type":27,"tag":35,"props":662,"children":663},{},[664],{"type":33,"value":665},"因此优先级应当是：",{"type":27,"tag":41,"props":667,"children":668},{},[669,674,679],{"type":27,"tag":45,"props":670,"children":671},{},[672],{"type":33,"value":673},"搜索框可输入",{"type":27,"tag":45,"props":675,"children":676},{},[677],{"type":33,"value":678},"主导航可点击",{"type":27,"tag":45,"props":680,"children":681},{},[682],{"type":33,"value":683},"核心提交按钮能工作",{"type":27,"tag":35,"props":685,"children":686},{},[687],{"type":33,"value":688},"把其他花哨交互排在后面，体验反而更完整。",{"type":27,"tag":129,"props":690,"children":692},{"id":691},"_43-视觉上要让还没来得及增强的状态也自然",[693],{"type":33,"value":694},"4.3 视觉上，要让“还没来得及增强”的状态也自然",{"type":27,"tag":35,"props":696,"children":697},{},[698],{"type":33,"value":699},"不要把占位状态做成一种羞耻标记。好的渐进增强页面，在弱网和慢设备上也应该像一个有节奏的产品，而不是一堆故障灯。",{"type":27,"tag":89,"props":701,"children":702},{},[],{"type":27,"tag":93,"props":704,"children":706},{"id":705},"_5-什么时候它值得做",[707],{"type":33,"value":708},"5. 什么时候它值得做",{"type":27,"tag":35,"props":710,"children":711},{},[712],{"type":33,"value":713},"流式 SSR 并不是所有项目的标准答案。",{"type":27,"tag":35,"props":715,"children":716},{},[717],{"type":33,"value":718},"适合的场景：",{"type":27,"tag":41,"props":720,"children":721},{},[722,727,732],{"type":27,"tag":45,"props":723,"children":724},{},[725],{"type":33,"value":726},"内容页、详情页、营销页，首屏价值高",{"type":27,"tag":45,"props":728,"children":729},{},[730],{"type":33,"value":731},"存在部分慢模块，但核心内容能先完成",{"type":27,"tag":45,"props":733,"children":734},{},[735],{"type":33,"value":736},"页面模块边界清晰，适合拆出关键路径",{"type":27,"tag":35,"props":738,"children":739},{},[740],{"type":33,"value":741},"不一定值得的场景：",{"type":27,"tag":41,"props":743,"children":744},{},[745,750,755],{"type":27,"tag":45,"props":746,"children":747},{},[748],{"type":33,"value":749},"极简单页应用，本身首屏负担很轻",{"type":27,"tag":45,"props":751,"children":752},{},[753],{"type":33,"value":754},"后台系统以强交互为主，首屏信息展示价值有限",{"type":27,"tag":45,"props":756,"children":757},{},[758],{"type":33,"value":759},"团队还没建立组件边界和数据分层，直接上流式只会把复杂度前置",{"type":27,"tag":35,"props":761,"children":762},{},[763],{"type":33,"value":764},"一个成熟判断标准是：",{"type":27,"tag":61,"props":766,"children":767},{},[768],{"type":27,"tag":35,"props":769,"children":770},{},[771],{"type":33,"value":772},"如果你无法明确指出“哪部分必须先给用户，哪部分可以稍后补”，那你还没准备好做流式优化。",{"type":27,"tag":89,"props":774,"children":775},{},[],{"type":27,"tag":93,"props":777,"children":779},{"id":778},"_6-最容易踩的坑",[780],{"type":33,"value":781},"6. 最容易踩的坑",{"type":27,"tag":129,"props":783,"children":785},{"id":784},"_61-把所有模块都做成-suspense结果整个页面像抽卡",[786],{"type":33,"value":787},"6.1 把所有模块都做成 suspense，结果整个页面像抽卡",{"type":27,"tag":35,"props":789,"children":790},{},[791],{"type":33,"value":792},"用户不怕页面逐步展开，用户怕每一块都在随机跳变。节奏比技术更重要。",{"type":27,"tag":129,"props":794,"children":796},{"id":795},"_62-首屏-html-提前到了但关键-css-和字体没跟上",[797],{"type":33,"value":798},"6.2 首屏 HTML 提前到了，但关键 CSS 和字体没跟上",{"type":27,"tag":35,"props":800,"children":801},{},[802],{"type":33,"value":803},"这会让页面“理论上更快，视觉上更乱”。",{"type":27,"tag":129,"props":805,"children":807},{"id":806},"_63-过早追求花式流式忽略最朴素的缓存与数据合并",[808],{"type":33,"value":809},"6.3 过早追求花式流式，忽略最朴素的缓存与数据合并",{"type":27,"tag":35,"props":811,"children":812},{},[813],{"type":33,"value":814},"有些页面真正的问题不是不会 stream，而是后端串行请求太多。不要用复杂方案掩盖基础问题。",{"type":27,"tag":89,"props":816,"children":817},{},[],{"type":27,"tag":93,"props":819,"children":821},{"id":820},"_7-一个更现实的工程结论",[822],{"type":33,"value":823},"7. 一个更现实的工程结论",{"type":27,"tag":35,"props":825,"children":826},{},[827],{"type":33,"value":828},"流式 SSR 解决的是“别让最慢模块拖住全场”，Progressive Enhancement 解决的是“别把核心任务押注在 JS 最终成功这件事上”。",{"type":27,"tag":35,"props":830,"children":831},{},[832],{"type":33,"value":833},"两者结合起来，本质上是在做一件成熟系统都会做的事：",{"type":27,"tag":35,"props":835,"children":836},{},[837],{"type":27,"tag":83,"props":838,"children":839},{},[840],{"type":33,"value":841},"把页面拆成不同优先级，再按优先级分配等待成本。",{"type":27,"tag":35,"props":843,"children":844},{},[845],{"type":33,"value":846},"这件事很有思想含量，因为它要求团队接受一个事实：",{"type":27,"tag":35,"props":848,"children":849},{},[850],{"type":33,"value":851},"页面不是一个整体，它是一组价值不同的承诺。",{"type":27,"tag":89,"props":853,"children":854},{},[],{"type":27,"tag":93,"props":856,"children":858},{"id":857},"总结",[859],{"type":33,"value":857},{"type":27,"tag":41,"props":861,"children":862},{},[863,868,873,878],{"type":27,"tag":45,"props":864,"children":865},{},[866],{"type":33,"value":867},"流式 SSR 让关键内容更早到达，不再被最慢模块拖住。",{"type":27,"tag":45,"props":869,"children":870},{},[871],{"type":33,"value":872},"渐进增强让核心任务更早可用，不再完全依赖全量 JS。",{"type":27,"tag":45,"props":874,"children":875},{},[876],{"type":33,"value":877},"真正的收益来自优先级拆分，而不是技术名词本身。",{"type":27,"tag":45,"props":879,"children":880},{},[881],{"type":33,"value":882},"如果页面边界混乱，先整理边界，再谈流式。",{"type":27,"tag":35,"props":884,"children":885},{},[886],{"type":33,"value":887},"小明收尾一句：",{"type":27,"tag":61,"props":889,"children":890},{},[891],{"type":27,"tag":35,"props":892,"children":893},{},[894],{"type":33,"value":895},"好的页面不是“一次性全部出现”，而是每一步出现都刚好配得上用户此刻的等待。",{"type":27,"tag":897,"props":898,"children":899},"style",{},[900],{"type":33,"value":901},"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);}",{"title":7,"searchDepth":475,"depth":475,"links":903},[904,908,909,914,919,920,925,926],{"id":95,"depth":20,"text":98,"children":905},[906,907],{"id":131,"depth":475,"text":134},{"id":175,"depth":475,"text":178},{"id":202,"depth":20,"text":205},{"id":257,"depth":20,"text":260,"children":910},[911,912,913],{"id":268,"depth":475,"text":271},{"id":307,"depth":475,"text":310},{"id":341,"depth":475,"text":344},{"id":382,"depth":20,"text":385,"children":915},[916,917,918],{"id":388,"depth":475,"text":391},{"id":652,"depth":475,"text":655},{"id":691,"depth":475,"text":694},{"id":705,"depth":20,"text":708},{"id":778,"depth":20,"text":781,"children":921},[922,923,924],{"id":784,"depth":475,"text":787},{"id":795,"depth":475,"text":798},{"id":806,"depth":475,"text":809},{"id":820,"depth":20,"text":823},{"id":857,"depth":20,"text":857},"markdown","content:topics:engineering:streaming-ssr-progressive-enhancement-guide.md","content","topics/engineering/streaming-ssr-progressive-enhancement-guide.md","topics/engineering/streaming-ssr-progressive-enhancement-guide","md",1777109947775]