Bowen 的博客

SSR（服务端渲染）基本原理和流程

2020年7月31日16:272024年2月3日22:50

什么是 SSR

服务端渲染 Server Side Rendering。与传统纯客户端渲染(Client Side Rendering)的差别是：

CSR 模式下服务端返回的是：

<body>
  <div id="app"></div>
  <script src="/main.xxx.js"></script>
</body>

SSR 模式下服务端返回的是

<div id="app" data-server-rendered="true">
  <div class="user-wraper">
    <p>你好，风清扬</p>
  </div>
  <ul class="order-list">
    <li>订单号：111</li>
    <li>订单号：222</li>
    ...
  </ul>
</div>

为什么要用 SSR

优点主要有两点：

降低白屏时间
SEO 友好

SSR 时序图

虚拟 DOM 挂载到真实 DOM