服务端渲染与客户端渲染

服务端渲染SSR与客户端渲染CSR

服务端渲染：

通俗地讲，在服务端将HTML解析成树形的数据结构，即DOM树，再把页面 DOM 的结构树转成 String 吐出来，然后在前端（如浏览器）进行解析渲染。

Java服务端渲染：

Node服务端渲染：

其中客户端请求网页后，node服务向后端业务接口请求数据。因为是服务端通信，比浏览器请求要快得多。最后拿到数据后去找对应模板结合生成字符串给客户端，用户直接看到的就是结合好数据后的页面展示。

服务端渲染的特点：
1、在服务端解析HTML形成DOM结构树；
2、客户端只负责解析渲染；
3、常用的Java服务端渲染技术：Servlet/Jsp、FreeMarker、thymeleaf、Velocity等。
4、常用的JS服务端渲染技术：Node.js、Express.js、Sails.js、Next.js、Nuxt.js等。

服务端渲染的优点：
1、返回的HTTP Response是包含着全部页面内容的，相对来说页面的主体DOM结构都会在这个响应中返回，可以让用户更快的看到页面的主体部分，解决存在闪白的现象。
2、而这样的响应也有利于SEO，网站通过href的url将spider直接引到服务端，服务端提供优质的网页内容给spider。

服务端渲染的缺点：
1、如果返回的DOM比较复杂，带有复杂的交互页面，开发难度会加大，纯后端渲染很难带来良好的交互体验。
2、纯后端DOM渲染中，地址的路由完全是由后端控制的，每一次路由发生变化，都会引起页面的刷新，这个使用体验其实也不是很好。

服务端渲染适用场景：
对SEO有要求的系统，比如：门户首页、商品详情页面等。

客户端渲染：

由于web2.0中AJAX技术兴起，出现了客户端渲染：客户端（浏览器）使用AJAX向服务端发起http请求，获取到了想要的数据，客户端拿到数据开始解析html网页，生成DOM树并解析渲染，并最终将网页内容展示给用户。在客户端生成html页面并渲染DOM树的过程称为客户端渲染。

客户端渲染的特点：
1、在客户端渲染DOM树，并生成html；
2、服务端只负责响应数据，而不是html网页；
3、常用的客户端渲染技术：jquery、vue.js、React等。

客户端渲染的优点：
1、服务端只提供数据不用关心用户界面的内容，有利于提高服务端的开发效率。
2、js代码负责交互和展现，后端以API形式提供纯粹的数据，这种改变带来的最大的好处就是，交互的部分可以脱离数据接口独立的开发和调试，让站点的交互能力大幅的提升，并且很好的解耦了表现层和数据层的代码逻辑。

客户端渲染的缺点：
1、第一屏的DOM渲染，依赖于大量的前端代码的加载和一次到多次的API请求。请求本身处理的时间，加上http请求的round trip的时间，这就会让第一屏的渲染之前有很多工作要做，并且每一步工作都带着从用户的网络到服务器网络的访问延迟，如果用户到服务器的物理距离很远，这个延迟累加起来就会很大。因此会出现闪白的现象，如果超过300ms，用户会有所感知，用户体验则不好。（很多优化的方法，比如控制max-age等缓存时间，通过MANIFEST来储存静态资源等，但都是针对用户第二次加载第一屏来进行的，无法从根本解决用户第一次加载第一屏的问题。）
2、不利于网站进行SEO，因为网站大量使用javascript技术，不利于spider抓取网页。

客户端渲染适用场景：
对SEO没有要求的系统，比如后台管理类的系统，如电商后台管理，用户管理等。

顺口提一下服务端的js渲染结合客户端渲染的方案：

这里是把纯前端渲染划分成了两个渲染的子阶段。第一个子阶段即SSR初步渲染完成DOM，也就是把我们上面说到的第一屏先在服务器端通过js渲染出来，这个子阶段在服务器端增加了一个js渲染层的服务（比如next.js和nuxt.js），这一层相当于把原来要在客户网络与服务器网络之间进行的大量通信转移到了由服务器网络与服务器网络之间进行，大大缩减了网络通信消耗的时间。第二个子阶段就是前段渲染的阶段，主要是解决首屏加载之后用用户交互问题，这些都和纯前端渲染时完全一致的。
当然，这样的做法需要给整体的架构增加一个独立的单元，给开发和部署都带来了更高复杂性。
虽然该方案最适于提供最优的使用体验，但不一定实际开发中最佳的方式，在特定的场景下，可以根据场景的特性来选择最简单的方法来完成。比如在网络延迟很低的情况下（内部网络），就没有必要选取服务器端js渲染的方式，纯前端渲染就可以带来低延迟的使用体验。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210622121436798.png

【捞话】
如果客官们觉得小编写的不错，给个赞呀～