客户端渲染（Client Side Rendering）简称CSR。从命名可以看出，客户端渲染就是在渲染工作在客户端上进行。举个例子，我们平时用vue，react等框架开发的项目，都是先下载html文档（不是最终的完全的html），然后下载js来执行渲染出页面结果。
以react框架为例，客户端渲染，服务端首次返回的html一般如下
<!DOCTYPE html>
<html lang="en">
<head>
<title data-react-helmet="true">react app</title>
<noscript>
</noscript>
</head>
<body>
<noscript>
You need to enable Javascript to run this app.
</noscript>
<div id="root"></div>
<script type="text/Javascript" src="/static/js/bundle.js" defer=""></script>
<script type="text/Javascript" src="/static/js/main.chunk.js" defer=""></script>
</body>
</html>
可以看出当前页面除了 <div id="root"></div> 元素，没有其他的元素，然后通过加载 bundle.js , main.chunk.js 来执行渲染。整个渲染过程包括，生成DOM节点，CSS样式，交互事件绑定，数据获取等等。
客户端渲染的优缺点
优点
- 前后端分离。前端专注于界面开发，后端专注于api开发，两者不互相限制，可以提高开发效率
- 渲染工作在客户端运行，可以减轻服务器的压力
缺点
- 对SEO不友好，因为搜索引擎不支持对CSR应用页面的抓取，所以每次抓取的都是空的html
SSR是什么
服务端渲染（Server Side Rendering）简称SSR。与客户端渲染不同的是，HTML的生成是在服务端生成，数据也是在服务器组装的，例如传统的PHP，EXPRESSJS等框架都是服务端渲染。
服务端渲染的优缺点
优点
- 有利于SEO，由于页面在服务器生成，搜索引擎直接抓取到最终页面结果。
- 有利于首屏渲染，html渲染所需要的数据都在服务器处理好，直接生成html，首屏渲染时间变短。
缺点
- 占用服务器资源，渲染工作都在服务端渲染。
- 用户体验不好，每次跳转到新页面都需要在重新服务端渲染整个页面，不能只渲染可变区域（可以配合ajax解决）。
SSG是什么
静态站点生成（Static Site Generation）简称SSG，在构建的时候把链接与之对应的HTML生成好，然后放到CDN或者服务端，充当静态资源访问。
静态站点生成的优缺点
优点
- 有利于减轻服务器压力，由于html已经提前生成好，不需要服务端和客户端去渲染
- 有利于SEO
缺点
- 不适用页面数据频繁变更的情况
- 每次都需要在构建的时候重新生成所有的html
除了 CSR，SSR，SSG之外，还有其他渲染解决方案，这里简单介绍一下，分别是
- ISR：Incremental Site Rendering，增量式的网站渲染
- DPR：Distributed Persistent Rendering，分布式的持续渲染
