一面/二面（7）之预渲染，服务端渲染和客户端渲染

服务端渲染和客户端渲染的区别
1、首先先来了解三个专业名词：

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

      优点：页面之间切换快，减少了服务器的压力

       缺点：首屏打开慢，不利于SEO搜索引擎优化，利用搜索引擎的规则是提高网站在有关搜索引擎的自然排名。

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

               因为SPA单页面应用，是通过AJAX获取数据，这就难保证我们的页面能被搜索引擎收到，并且有一些搜索引擎不支持js和通过ajax获取数据。那就更不用提SEO了，为了解决这个                问 题就产生了SSR。

（3）SSR服务端渲染：SSR的出现一定程度上解决了SPA首屏慢的问题，又极大的减少了SPA对于SEO的不利影响。

        优点：更快的响应时间，不用等待所有的js都下载完成，显示器便能显示出比较完整的页面；

                    更好的SSR，我们可以将SEO关键信息直接在后台渲染成html，从而保证了搜索引擎可以提取到相应数据。

       缺点：占用了大量的CPU和内存资源

2、接下来便是服务端渲染和客户端渲染的定义与区别

 服务端渲染：在早期的时候，由于页面比较简单，前后端分离还没有做的比较完善，所以当时一般页面渲染还是在服务端完成html文件的拼装，然后浏览器接收到这个文件，就可以直接解析                            展示。

服务端渲染：如今前端页面的复杂性提高，前端已经不再仅仅是普通的页面展示了，现在前端页面功能更加完善，也更加复杂。同时伴随着ajax的兴起，使得现在越来越崇尚前后端分离的开                            发方式。

                     后端不再提供完整的html页面，而是提供一些API使得前端可以获取需要的json数据，然后前端拿到数据后在前端完成html页面的拼装，然后展示在浏览器上，这就是客户端渲                               染。   

服务器端渲染的优缺点是？
优点：

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

1.不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，则对于前端复杂度高的项目，不利于项目高效开发。另外，如果是服务器端渲染，则前端一般就是写一个静态html文件，然后后端再修改为模板，这样是非常低效的，并且还常常需要前后端共同完成修改的动作； 或者是前端直接完成html模板，然后交由后端。另外，如果后端改了模板，前端还需要根据改动的模板再调节css，这样使得前后端联调的时间增加。
2.占用服务器端资源。即服务器端完成html模板的解析，如果请求较多，会对服务器造成一定的访问压力。而如果使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实完全交给了一个服务器。

客户端渲染的优缺点是？
优点：

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

1.前端响应较慢。如果是客户端渲染，前端还要进行拼接字符串的过程，需要耗费额外的时间，不如服务器端渲染速度快。
2.不利于SEO。目前比如百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，所以SEO很差。因为服务器端可能没有保存完整的html，而是前端通过js进行dom的拼接，那么爬虫无法爬取信息。 除非搜索引擎的seo可以增加对于JavaScript的爬取能力，这才能保证seo。

预渲染：无需服务器实时动态编译，采用预渲染，在构建时针对特定路由简单的生成静态HTML文件
优点：
几乎可以获得服务端渲染的所有优点，没有缺点，加载应用程序的路由，将结果保存在一个静态的HTML文件中，无需更改代码或添加服务器端
缺点：
若网站有成百上千条路线，预编译会非常的慢，虽每次更新只需要一次但会需要更长的时间
适用场景：
只需改善少数页面的SEO，可以采用预渲染

如何选择？
1.注重SEO的新闻网站，非强交互的页面，建议采用服务器端渲染
2.对于强交互的页面，不注重SEO，采用客户端渲染
3.只需改善少数页面的SEO，采用预渲染