SSR（传统服务端渲染）

如：爱彼迎

传统的服务端渲染有：asp、jsp、ejs等，服务端语言往往通过这些模板引擎将数据和 DOM在服务端渲染完成，返回一个完整的静态 HTML页面给客户端，由客户端直接显示。

原理

  1. 客户端发送 HTTP请求
  2. 服务端响应 HTTP请求，返回拼接好的 HTML字符串给客户端
  3. 客户端渲染 HTML

缺点

  • 前后端不分离，不好维护
  • 用户体验不佳，需要重新加载页面
  • 服务端压力大

CSR（客户端渲染）

如：飞书

在现代化的前端项目中，客户端渲染的代表性技术栈是 Vue、React、Angular，我们常常使用它们来构建客户端单页或者多页应用程序。以 SPA构建程序为例，在浏览器端首先渲染的是一套空的 HTML，通过 JS直接进行页面的渲染和路由跳转等操作，所有的数据通过 Ajax请求从服务器获取后，在进行客户端的拼装和展示。

原理

  1. 客户端发起 HTTP请求
  2. 服务端响应 HTTP请求，返回一个空的 HTML文件
  3. 客户端初始化时加载必须的 JS文件，请求接口
  4. 将生成的 DOM插入到 HTML中

缺点

  • 首屏加载慢
  • 不利于SEO，需要等待所有的JS文件完成加载解析

同构（现代服务端渲染）

如：美团

Vue、React的 SSR方案实际上就是同构渲染，我们现在讲的服务端渲染概念，是指在前端范畴或者说在 Vue、React等单页面技术栈范畴内，基于 Node Server 运行环境的服务端渲染方案，通过在 Node.js 中运行相同应用程序的前端框架（例如 React、Vue等 ），将其预渲染成 HTML，最后在客户端进行注水化处理。简单来讲，就是应用程序的大部分代码在服务器（Node服务端）和客户端上运行，这就是所谓的现代服务端渲染：同构。
我们以 Vue的 SSR实现方案为例做分析：

原理

  1. 客户端发起 HTTP请求
  2. 服务端渲染把 Vue实例转换成了静态的 HTML发送给客户端
  3. 客户端渲染是需要把事件、响应式特性等 Vue的特性都绑回去

缺点

  • 服务器压力大
  • 涉及构建设置和部署的更多要求
  • 一些三方库可能需要特殊处理

优点

  • 首屏速度快
  • 前后端分离
  • 利于SEO，搜索能爬取到页面关键字
  • 有一些现成框架： Nuxt.js、Next.js