推荐一篇掘金大佬的文章，写的很详细

# 渲染模式

# CSR

• 客户端渲染

• 流程：客户端请求到 html（无结构）和 js 文件资源，在客户端执行 js 代码，进行整个结合和渲染的流程。

• 特点：

  • 对客户端的压力较大，首屏加载时间可能较长
  • SEO 不友好
  • 对服务器的压力较小
  • 用户操作连贯、流畅。有更快的页面加载速度。

# NSR

• 原生端渲染
• ** 流程：** 客户端请求到 html（结构基本完整的）和 js 文件，通过 Ajax 预加载页面数据，通过 Native 渲染生成的 Html 数据并且缓存在客户端。
• NSR 的本质是分布式 SSR，将服务器的渲染工作放在了一个个独立地移动设备中，实现了页面的预加载，同时不会增加服务器压力
• NSR 和 SSR 最大差别是 NSR 把 SSR 执行的过程放在了客户端上，不需要服务器就可享受到 SSR 的体验。

# ESR

• 边缘端渲染
• ESR 边缘端渲染利用的是边缘计算的能力，将静态内容与动态内容以流式的方式，先后返回给用户。cdn 节点相比于 server 端，离用户更近，有着更短的网络延迟，在 cdn 节点上，将可缓存的页面静态部分，先快速返回给用户，同时在 cdn 节点上发送动态部分内容请求，将动态内容后续返回给用户
• ** 流程: ** 客户端会先到 cdn 节点上请求到静态的 html 文件，然后 cdn 节点会发送一个请求到服务端，服务端返回动态内容部分给客户端用于激活动态内容.
• 优缺点:
  • ESR 充分利用了边缘计算能力，它的优势在于能够在离用户更近的地方提供内容，从而减少网络数据传输的延迟，使得用户体验更流畅.
  • SEO 良好，用户交互性良好
  • 缺点是复杂性增加、边缘故障问题带来的持续性较差，不稳定 、内容同步较为麻烦

# SSR

• ** 服务端渲染:** 客户端请求到 html (内容完整的) 文件和 JS 文件，在客户端完成注水 (Hudration) 过程，将静态的 html 文件附加动态内容.
• 优缺点:
  • 改善了首屏加载时间
  • SEO 良好
  • 增加了服务器计算负担
  • 用户使用不流畅 (相比于 CSR)