前端页面的渲染模式

渲染模式

1, CSR

在这里插入图片描述

前后端分离的模式,对于后端开发人员来说,不需要去考虑前端页面如何。
对于上图的第一个截图可以看到,body标签下面,并没有具体的页面内容,
是在页面加载完成之后,再将页面内容全都塞到图一的div标签里面。

2,SSR

在这里插入图片描述
和CSR相反,这个是在服务端会把页面的内容返回回来,前端再进行渲染。
对于上图,前端代码中就会前端一些后端的语言,不会进行前端分离。

前端是负责ui和交互,这种方式就是代码的耦合度比较高,不容易去维护代码

3, 同构SSR

在这里插入图片描述
现在比较常用的就是同构SSR,在浏览器的network里面,服务器端返回的是一个完整的页面。

对于BFF 的概念,就是相当于在前端和后端之间的一层。这一层存在的意义是,对后端的数据进行拼接,将拼接后的结果返回给前端。
这样,后端就只可以关注数据的问题,一些逻辑问题就可以放给BFF来解决,最后满足前端接口数据的要求即可。

4,SSG

在这里插入图片描述
和SSR类似,不同的是,在获得到后端返回的html会被保存到本地或者是CDN上面,下次访问的时候,就相当于一个静态资源。那就不会每次都会访问服务器。

5, SSR和SSG的优势–利于SEO

在这里插入图片描述
CSR的痛点,就是对于搜索引擎并不会敏感,因为CSR的页面信息是为空,对于SSR来说,html文件里面会存在页面的一些数据,爬虫会根据html的内容进行检索到。

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值