本文参考以下文章并整理：
在讲服务度渲染之前，我们先回顾一下页面的渲染流程：
1.浏览器通过请求得到一个HTML文本
2.渲染进程解析HTML文本，构建DOM树
3.解析HTML的同时，如果遇到内联样式或者样式脚本，则下载并构建样式规则（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。4.DOM树和样式规则构建完成之后，渲染进程将两者合并成渲染树（render tree）
5.渲染进程开始对渲染树进行布局，生成布局树（layout tree）
6.渲染进程对布局树进行绘制，生成绘制记录
7.渲染进程的对布局树进行分层，分别栅格化每一层，并得到合成帧
8.渲染进程将合成帧信息发送给GPU进程显示到页面中
可以看到，页面的渲染其实就是浏览器将HTML文本转化为页面帧的过程。
详细参考：从输入一个网址到浏览器显示页面经历的过程
一、服务端渲染（SSR）
服务端渲染简单来说就是：
用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将 html 拼接好的，然后返回给前端完整的 html 文件，浏览器拿到这个 html 文件之后就可以直接解析展示了，这也就是所谓的服务器端渲染。
将组件或页面通过服务器生成HTML字符串，在发送到游览器，最后将静态标记 “混合”为客户端上完全交互的应用程序。
二、客户端渲染（CSR）
客户端渲染简单来说就是：
随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，可能是添加更多功能的组件，复杂性更大，另外，此时 ajax 的兴起，使得页面就开始崇拜前后端分离的开发模式，即后端不提供完整的 html 页面，而是提供一些 api 使得前端可以获取 json 数据，然后前端拿到 json 数据之后再在前端进行 html 页面的拼接，然后展示在浏览器上，这就是所谓的客户端渲染。
而如今我们大部分WEB应用都是使用 JavaScript 框架（Vue、React、Angular）进行页面渲染的，也就是说，在执行 JavaScript 脚本的时5候，HTML页面已经开始解析并且构建DOM树了，JavaScript 脚本只是动态的改变 DOM 树的结构，使得页面成为希望成为的样子，这种渲染方式叫动态渲染，也可以叫客户端渲染（client side rende）。
三、SSR的优势
服务器端渲染的优势就是容易 SEO，首屏加载快，因为客户端接收到的是完整的 HTML 页面。
利于SEO：不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本,使用了React或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少(如图一)。另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。
首屏加载快：首页是通过node加载的HTML字符串，用户直接可以看到完整HTML，所以更快。
四、CSR的优势
节省后端资源，局部刷新页面，多端渲染，前后端分离。
1、节省后端资源：
即服务器端完成html模板的解析，如果请求较多，会对服务器造成一定的访问压力。而如果使用前端渲染，就是把这些解析的压力分摊了前端。
2、便于前后端分离：
前端专注于前端UI，后端专注于api开发，且前端有更多的选择性，而不需要遵循后端特定的模板.
3、用户体验更好：
比如，我们将网站做成SPA或者部分内容做成SPA，这样，尤其是移动端，可以使体验更接近于原生app。
对比图
五、渲染过程
服务端渲染过程
客户端渲染过程
六、SSR的局限性
渲染过程由后端完成，会造成服务器压力较大、开发环境受限，服务端渲染中，只会执行到componentDidMount之前的生命周期钩子，不利于前后端分离，开发效率低。
1、服务端压力较大
①. 本来是通过客户端完成渲染，现在统一到服务端node服务去做。尤其是高并发访问的情况，会大量占用服务端CPU资源；
②. 渲染过程在后端完成，那么肯定会耗费后端资源。费流量，即使局部页面的变化也需要重新发送整个页面。不利于前后端分离，开发效率低。
2、开发环境受限
①. 在服务端渲染中，只会执行到componentDidMount之前的生命周期钩子，因此项目引用的第三方的库也不可用其它生命周期钩子，这对引用库的选择产生了很大的限制；
七、CSR的局限性
首屏加载时间会比较慢、性能差，白屏，对于SEO无能为力。
1、前端响应较慢
客户端渲染、由于页面显示过程要进行JS文件拉取和React代码执行，前端还需要进行拼接字符串的过程，需要耗费额外的时间，不如服务器渲染的速度快。
2、不利于SEO
对于SEO(Search Engine Optimazition,即搜索引擎优化)，完全无能为力，因为搜索引擎爬虫只认识html结构的内容，而不能识别JS代码内容。
八、区别及适用场景
CSR和SSR最大的区别在于：
前者的页面渲染是JS负责进行的，而后者是服务器端直接返回HTML让浏览器直接渲染。
CSR和SSR重要的区别在于：
究竟是谁来完成html文件的完整拼接
适用场景
不谈业务场景而盲目选择使用何种渲染方式都是耍流氓。
1、比如企业级网站：
主要功能是展示而没有复杂的交互，并且需要良好的SEO，则这时我们就需要使用服务器端渲染；
2、类似后台管理页面：
交互性比较强，不需要seo的考虑，那么就可以使用客户端渲染。
3、具体使用何种渲染方法并不是绝对的：
比如现在一些网站采用了首屏服务器端渲染，即对于用户最开始打开的那个页面采用的是服务器端渲染，这样就保证了渲染速度，而其他的页面采用客户端渲染，这样就完成了前后端分离。
