SSR 服务端渲染记录

Thu Aug 22 2024 · 25min

解析

suspense 结束前，主文档先渲染占位，并且留一个 template 元素站位用来后续上屏真实渲染结果

<div id="root">
  <!--$?-->
  <template id="B:0"></template>
  loading..
  <!--/$-->
</div>

下面是对应的待替换的模版

<div hidden id="S:0">
  <template id="P:1"></template> // 服务端渲染的结果
  <template id="P:2"></template> // 服务端对应的数据
</div>

等到流式结束后，上边的元素会变成

<div hidden id="S:0">
  <div>418</div>
  // 服务端渲染的结果
  <script>
    服务端接口返回数据;
  </script>
  // 服务端对应的数据
</div>

然后再用 S:0替换 B:0完成 hydrate