DOM 渲染演化过程，大致分为三个阶段

  • 纯后端渲染
  • 纯前端渲染
  • 服务端的JS渲染结合前端渲染

纯后端渲染

DOM树生成基本是在后端完成，后端服务程序会把各种数据拼成一个DOM树，并转化为一个字节流作为HTTP Response返回给浏览器

  1. 用户更快的看到主体部分，对网络爬虫友好，多SEO有帮助
  2. DOM有复杂的交互时，开发难度大，交互体验不好，每次路由的变化都会引起页面的刷新
  3. “页面” - 把一次DOM类型的HTTP请求作为一个页面

纯前端渲染

把DOM生成的主逻辑都放在前端，后端只返回一个DOM结构，比如一个容器元素的DOM，然后由JS代码把页面的渲染到容器中
请求基本过程

纯前端渲染，服务器主要以API的形式返回数据，然后js把数据重新组合成DOM。比如Vue.js等

  1. 解决后端渲染前端交互体验不好的问题，提高用户交互体验
  2. 分离表现层和数据层，js 负责交互和展现，很好的解耦表现层和数据层
  3. 第一屏渲染，依赖前端代码第一次加载以及API请求，页面请求，以及API请求的访问延时。
  4. 针对3的优化max-age，缓存，通过Manifest存储静态资源

服务端的JS渲染结合前端渲染

这里把纯前端渲染划分为两个渲染的子阶段。第一个子阶段初步渲染完成DOM, 也就是第一屏在服务端通过js渲染处理，在服务端增加一个js渲染的服务（next.js等）
请求基本过程

  1. 解决了首屏加载时间长用户体验差的问题
  2. 保留了纯前端渲染的优势
  3. 渲染结果SEO友好
  4. 整体架构增加一个渲染单元，给开发和部署提高了复杂度

参考文档: https://www.cnblogs.com/asdf89/p/9548614.html