客户端渲染与服务端渲染

前言

当前端项目不断更新迭代，工程文件不断增大，打包文件也越来越大，页面的整体刷新加载速度就会变慢，从而极大地影响了用户体验。因此需要一种技术来解决这种问题并提高网页的响应速度。

概念

单页面应用（SPA）

单页面应用（single-page application）：只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源，公共资源仅需加载一次，常用于PC端网站，购物等网站。

• 优点：页面之间切换快，减少了服务器的压力
• 缺点：首屏打开慢，不利于SEO搜索引擎优化，利用搜索引擎的规则是提高网站在有关搜索引擎的自然排名。

搜索引擎优化（SEO）

搜索引擎优化（SEO）：利用搜索引擎的规则提高网站在有关搜索引擎的自然排名。

因为SPA单页面应用，是通过Ajax获取数据，这就难保证我们的页面能被搜索引擎收到，并且有一些搜索引擎不支持JS和通过Ajax获取数据，那就更不用提SEO了。

渲染（Render）

如果我们只是想显示一堆不变的数据，那么我们直接写一个a.html丢到服务器上让客户端访问就可以了。

但这是基本不可能的事情，数据一般是变化的。

你不可能为每套数据写一个视图，所以我们需要分离数据和视图，然后使用一种技术将数据塞到视图中，这种技术就叫渲染。

这工作放在服务器上做就是服务器渲染，放在浏览器做就是浏览器渲染。

简单来说：渲染，就是指数据放入 html模板文档的过程。

客户端渲染（CSR）

客户端渲染（Client Side Render），就是用户在通过URL请求访问网站的时候，服务器端返回给客户端的是HTML文档，再让浏览器去解析渲染展示页面。浏览器拿到页面后，根据写在HTML页面上的JS代码，对该HTML的内容进行修改。

优点

1. 前后端分离。前端专注于前端UI，后端专注于api开发，且前端有更多的选择性，而不需要遵循后端特定的模板。
2. 体验更好。比如，我们将网站做成SPA或者部分内容做成SPA，这样尤其是移动端，可以使体验更接近于原生app。

缺点

1. 前端响应较慢。如果是客户端渲染，前端还要进行拼接字符串的过程，需要耗费额外的时间，不如服务器端渲染速度快。

2. 不利于SEO。目前比如百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，所以SEO很差。

   • 因为服务器端可能没有保存完整的HTML，而是前端通过JS进行dom的拼接，那么爬虫无法爬取信息。 除非搜索引擎的seo可以增加对于JavaScript的爬取能力，这才能保证seo。

服务器渲染（SSR）

服务器渲染（Server Side Render），前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将完整的HTML返回给前端。

在SPA场景下，服务端渲染都是针对第一次get请求，它会完整的HTML给浏览器，浏览器直接渲染出首屏，用不着浏览器端多一个Ajax请求去获取数据再渲染。

优点

1. 前端耗时少。因为后端拼接完了HTML，浏览器只需要直接渲染出来。
2. 有利于SEO。因为在后端有完整的HTML页面，所以爬虫更容易爬取获得信息，更有利于SEO。
3. 无需占用客户端资源。即解析模板的工作完全交由后端来做，客户端只要解析标准的HTML页面即可，这样对于客户端的资源占用更少，尤其是移动端，也可以更省电。
4. 后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效 。

注：为什么服务端渲染有利于SEO? 服务端将整个界面的数据填充完整之后，直接返回这个界面。第一，少了客户端请求的过程。第二，返回的直接就是整个界面。必然使爬虫能够更快，更准确的爬取到它想要的信息

缺点

1. 不利于前后端分离，开发效率低。

   • 使用服务器端渲染，则无法进行分工合作，则对于前端复杂度高的项目，不利于项目高效开发。
   • 如果是服务器端渲染，则前端一般就是写一个静态html文件，然后后端再修改为模板，这样是非常低效的，并且还常常需要前后端共同完成修改的动作；或者是前端直接完成html模板，然后交由后端。另外，如果后端改了模板，前端还需要根据改动的模板再调节css，这样使得前后端联调的时间增加。

2. 占用服务器端资源。

   • 即服务器端完成html模板的解析，如果请求较多，会对服务器造成一定的访问压力。而如果使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实完全交给了一个服务器。

使用

选择何种渲染方式，需要根据具体的实际情况进行选择。

比如企业级网站，主要功能是展示而没有复杂的交互，并且需要良好的SEO，则这时我们就需要使用服务器端渲染；

而类似后台管理页面，交互性比较强，不需要SEO的考虑，那么就可以使用客户端渲染。

另外，具体使用何种渲染方法并不是绝对的，比如现在一些网站采用了首屏服务器端渲染，即对于用户最开始打开的那个页面采用的是服务器端渲染，这样就保证了渲染速度，而其他的页面采用客户端渲染，这样就完成了前后端分离。

总结

最后用一个表格来总结下浏览器和服务器端渲染端却别和优缺点