一图让你快速弄懂客户端渲染（CSR）与服务端渲染（SSR）

作为前端开发的话，大多数情况下基本使用CSR来进行页面渲染，但是一定必不可免的会了解到服务端渲染（SSR）。为了更好的了解到二者之间的区别我们要抛出一个老生常谈的面试点，浏览器输入一个url地址到页面显示，这个过程经历了什么？

客户端渲染（client-side rendering）

从图中的内容可以很清晰的总结客户端渲染的流程如下 :
1、用户输入地址，客户端向服务器发送请求
2、服务器将页面的相关代码原封不动的传递给浏览器
3、浏览器解析文件
4、遇到ajax请求则向服务器再次请求一些数据
5、服务器再次向浏览器发送相应的数据
6、浏览器拿到ajax请求返回的数据后，将数据渲染在页面上

那么在这个过程中就不可避免的多使用至少一次的请求给后台，所以在浏览器的首屏加载页面的速度的话会有些延迟，对用户的感受就显得稍微不友好了。因此就会有了服务端渲染（SSR）选择的出现了。

服务端渲染（server-side rendering）

从图中的内容可以很清晰的总结服务端渲染的流程如下：
1、客户端向服务器发送一次请求
2、服务器接收请求，将页面所需的数据进行统一处理
3、当页面结构和数据处理并渲染完毕后，发送给客户端
4、客户端接收服务器发送过来的网页文件，不需要做任何操作，直接呈现

那么这个过程中相比较于客户端渲染，至少就减少了一次请求，渲染页面的速度也就相应的加快了。

两种渲染的优缺点我总结如下：

客户端渲染（CSR）：

优点：

1、前后端分离，开发效率高。

2、用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。

缺点：

1、前端响应速度慢，特别是首屏，可能会导致用户流失甚至举报扣工资。

2、不利于SEO优化，因为客户端渲染页面的代码中只有一个空代码，爬虫无法拾取关键词。

服务端渲染（SSR）：

优点：

1、尽量不占用前端的资源，前端这块耗时少，速度快。

2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。

缺点：

1、不利于前后端分离，主要工作在后端哪里，前端显得没啥总用了，开发效率慢。

2、前端首屏响应速度变快，但是加大了服务器的压力。

二者之间的选择：

如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。

如果是后台管理页面，交互性很强，它不需要考虑到SEO，那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的，现在很多网站使用服务端渲染和客户端渲染结合的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。