快速理解CSR、SSR、SSG、同构渲染（干货版）

CSR（Client-Side Rendering，客户端渲染）

所有页面在客户端（即浏览器）实时生成并进行渲染，常见的SPA（Single Page Application，单页应用）就是CSR模式。

优点

1）不同页面间切换流畅。因为SPA只有一个HTML页，其它所有页面被当成一个个子模块，通过路由控制，在当前HTML页中进行快速切换。

2）有利于前后端分离，提高开发效率。这让前端专注于UI开发，后端专注于接口开发。

缺点

1）首次访问的响应时间较长。由于所有页面都在浏览器生成，必须等待相关 JS资源 加载完，才会生成和渲染页面，因此首次访问的白屏时间较长。

2）不利于页面曝光。因为首屏的HTML几乎是空的，难以被SEO的网络爬虫收集识别。

适用场景

主要用于交互复杂、且无SEO（Search Engine Optimization）诉求的场景；如常见的 后台管理系统 等。

SSR（Server-Side Rendering，服务端渲染）

当用户访问某个页面时，服务端会实时生成对应的HTML，并进行初始数据渲染，然后返回给浏览器一个完整的HTML页面。浏览器拿到后HTML会先解析，并呈现给用户，再慢慢加载相关的 JS资源（等 JS资源 返回后，页面就能实现交互效果）。

其实最开始的网站就是SSR模式，例如以前的PHP、JSP等等。

优点

1）首次访问的响应时间短。因为服务端会初始化生成一个完整的HTML，浏览器拿到即可展示，不必等待许多 JS资源 的加载。

2）有利于SEO。因为爬虫能通过HTML爬到更多信息，可提高网站被搜索到的几率。

缺点

1）不同页面之间的切换 会闪屏。因为切换页面时，服务端会生成另一个全新的HTML页面，浏览器拿到之后 会从头开始渲染 新的HTML，这时视觉上会有一个闪屏的动作。

2） 服务器压力较大。因为页面渲染由服务端完成。

3）不利于前后端分离，影响开发效率。

适用场景

主要用于交互简单、有SEO诉求、以展示为主的场景；如常见的 企业门户官网、博客 等。

同构渲染（CSR+SSR）

对于一个网站的首页（这里指该网站的默认页面），采用SSR模式，而对于该网站的其余页面，则采用CSR模式。简而言之，就是针对这两种模式，取其所处，避其所短。

步骤如下：

1）同一套代码，先在服务端执行一遍，只生成 首页的HTML 并初始化数据，返回给浏览器。

2）浏览器拿到初版的静态首页后，可直接解析呈现给用户，同时加载 JS资源。

3）JS资源 返回后，浏览器再执行一遍，接管当前的首页（为当前HTML重新生成VDOM和事件绑定），将其激活为SPA（即后续页面的生成 和 路由跳转，将改为由浏览器负责）。

参考案例：React服务端渲染与同构 和 React SSR服务端渲染

优点

其实就是CSR和SSR的优点集合。

缺点

1）同一套代码，需要在前后端分别执行一遍。

2）配置步骤 比较繁琐。

适用场景

适用于交互复杂、且有SEO诉求的场景。

SSG（Static Site Generation，静态站点生成，也叫预渲染）

所有页面都是在构建时生成和数据渲染的（CSR和SSR是在运行时动态生成的），即一次生成可被多次访问（SSR则是每次访问都会重新生成）。

优点

1）页面响应快。因为都是静态页面。

2）托管和运维成本低。因为无需复杂的服务端支持。

3）有利于SEO。

缺点

1）页面数据不具备实时性。每次数据更新，需要重新构建代码。

2）难以应对 交互复杂的页面。

适用场景

适用于 数据时效性 要求不高 的场景。如企业官网、营销网站等等。