客户端渲染和服务端渲染

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_41282726/article/details/99998588

参考链接:客户端渲染和服务端渲染的区别https://blog.csdn.net/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,后端也需要改

猜你喜欢

转载自blog.csdn.net/weixin_41282726/article/details/99998588