客户端渲染和服务端渲染

参考链接：客户端渲染和服务端渲染的区别https://blog.youkuaiyun.com/qq_40885461/article/details/88539989

                  浅谈服务端渲染(SSR)https://www.jianshu.com/p/10b6074d772c

客户端渲染

在服务端Server放了一个HTML页面，客户端发送请求，服务端将页面给客户端，客户端在收到服务端响应的字符串后，然后浏览器从上到下依次解析，在解析过程中，如果发现ajax请求，则再次发起新的请求，拿到ajax响应结果后再模板引擎渲染。所以客户端渲染至少发送了两次请求。其中，第一次请求拿到的是页面，第二次请求拿到的是动态数据。总的来说，客户端渲染页面加载速度快，但是数据加载缓慢。

                                     

利：

• 前后端分离，前端专注于UI，后端专注于逻辑；
• 局部刷新，无需每次请求完整页面，体验更好；
• 节省服务器性能，部署简单；
• 交互性好，可以实现各种效果。

弊：

• SEO问题，爬虫看不到完整的呈现源码；
• 首屏渲染慢，渲染前，需要下载一堆js和css文件；
• 耗电

服务端渲染(SSR:server side render)

在服务端使用模板引擎，模板引擎最早诞生于服务端，后来才发展到了前端。浏览器向服务端发起一个页面请求，实际上服务端响应浏览器的请求前已经将页面和数据渲染完成。因此，服务端渲染，响应的就是最终的结果，在客户端不需要再做任何处理。一次请求就可以完成渲染，因此服务端渲染比客户端渲染更快。

                                   

举个商品列表页面为例子:

前端渲染：说的应该是刚进入页面时，商品列表这些数据都不给你，不会渲染出这些数据。然后加载script时，再用ajax或者fetch之类的发起了请求另一个接口，服务端返回了商品列表的json数据给你，你在js中用模板引擎之类的技术，把这些数据拼成html字符串插入到Dom里。

服务端渲染：服务端用php的smarty模板或者java的jsp，把页面的商品列表信息渲染出来了，返回一个html给浏览器了。

利：

• 首屏渲染快，客户端只负责解析html；
• 利于SEO;
• 可以生成缓存片段，生成静态化文件；
• 节能

弊：

• 用户体验较差；
• 不容易维护，通常修改了部分html或者css,后端也需要改