SSR和CSR区别

简介: SSR和CSR区别

SSR:Server-side rendering (server 服务器)(side有边的意思 所以在这里

翻译为服务器的一边也就是服务器端)而rendering 的意思则是渲染的意思



CSR:Client-side rendering(Client则是客户端的意思)后边的英文则和上边

一样了


在做区别之前我们先了解一下SSR和CSR的渲染过程分别是什么样的


SSR:服务器端渲染

1. 用户输入url地址 客户端向服务器发送url请求

2.服务器接收到客户端的url请求后 直接对网页文件进行操作 例如(模板引擎)

然后将网页文件中需要的数据直接放到这个文件中 此时这个时候已经将文件的

渲染处理好了 然后再发给客户端 (也就是把文件渲染任务做好之后再发给客户端)

3. 浏览器拿到渲染好了的网页文件 直接渲染在页面上


CSR:客户端渲染

1. 用户输入url地址 客户端向服务器发送url 请求数据

2. 服务器接收到请求 将html css js等文件 ”不做任何操作“返回给客户端

3. 接收到文件后 从上到下开始解析文件 但是在这个过程中如果遇到了类似于

ajax请求这种还需要再次像服务器请求数据的操作就会再去向服务器请求一次

然后服务器再把请求的内容返回给客户端

4.客户端拿到二次请求的数据 开始将数据渲染到相对应的位置然后展现出来


相同上边的对比理解:

1. 服务器端渲染相比于 客户端渲染 会至少多一次 客户端到服务器的请求 这也就

会导致浏览器的首屏加载速度变慢 因此就有了服务器端渲染也就是SSR


来说一下SSR和SCR各自的优缺点

CSR:客户端渲染

优点:

1. 前后端分离 开发效率高

2. 用户体验好 因为SPA 单页面应用的开发模式

缺点:

1. 前端响应速度慢 特别是首屏 可能会导致用户流失

2. 不利于SEO优化 因为客户端渲染页面的代码中只有一个空代码 SEO爬虫无法

获取关键词

(那么为什么会出现代码只有空代码的情况呢?)

这里说一下

因为 我们的CSR客户端渲染是一种叫做动态渲染的渲染方式

我们回顾一下流程 解析html css js文件 过程中 我们页面中的大部分DOM元素

都是通过js插入的 但是js文件是需要下载解析的 但是在下载解析之前 就已经开始

构建DOM树了  所以在一开始会是一个空壳子 需要等待下载好了 js文件并解析完毕后

才会有内容

那为什么SSR服务器端渲染不会出现这种空壳子的情况呢?

因为通过上边我总结的表也能看出来 在第一次发送url请求的时候 服务器就开始

帮助我们进行对html文件的渲染和组装了 当服务器端返回的时候 返回回来的会是

一个已经全部渲染完的html文件 我们客户都也就是前端只需要负责渲染就行了

所以不会出现这种空壳子的情况


SSR:服务器端渲染

优点:

1. 尽量不占用前端的资源 ,前端只需要负责呈现 耗时少,速度快

2. 有利于SEO优化 因为在后端有完整的html页面 也就是MPA多页面应用模式

所以爬虫更容易获取信息

(这里稍微说一下我理解的SPA和MPA

SPA:单页面应用 看他的名字也能知道他就是一个单页面 而路由跳转其实都是

组件嵌套的关系 也就是局部更新 页面没有改变

MPA:多页面应用 每次跳转路由都会是一个新的页面 每次跳转都会刷新页面

因为是全新的一个页面 所以他是全部更新 相比于单页面应用的局部更新肯定是

没有单页面应用的模式加载内容快的 因为 一个是只加载一部分需要修改的内容

一个是需要全部加载 这一点显而易见 但是MPA有完整的html页面所以在SEO优化

也就是爬取关键词这方面相比于SPA肯定也是优于SPA的)


缺点:

1. 不利于前后端分离,主要工作在后端 前端显示没啥用 开发效率慢

2. 前端首屏响应速度变化,但是加大了服务器的压力

相关文章
|
程序员 测试技术
程序员的“Bug之旅”:为何无法一次性写出完美代码?
程序员在软件开发过程中难以一次性写出完美代码,需要不断修改和调试,即“改Bug”,这是由多个因素共同作用的结果。技术层面的复杂性、管理和流程上的不足以及个人能力和认知的局限性都是导致这一现象的重要原因。然而,这并不意味着无法避免或改进。通过加强需求管理、建立有效的版本控制和测试机制、推动团队知识共享以及鼓励代码审查和自我反思等措施,可以降低改Bug的频率和成本,提高软件开发的效率和质量。辩证地看待这一问题,既要理解其存在的合理性,也要积极寻求改进之道,以实现更好的产品和服务。
421 2
|
SQL 弹性计算 安全
购买阿里云活动内云服务器之后设置密码、安全组、增加带宽、挂载云盘教程
当我们通过阿里云的活动购买完云服务器之后,并不是立马就能使用了,还需要我们设置云服务器密码,配置安全组等基本操作之后才能使用,有的用户还需要购买并挂载数据盘到云服务器上,很多新手用户由于是初次使用阿里云服务器,因此并不知道这些设置的操作流程,下面给大家介绍下这些设置的具体操作流程。
购买阿里云活动内云服务器之后设置密码、安全组、增加带宽、挂载云盘教程
阿里云服务器怎么开启或关闭8080端口?配置新的端口也可使用
阿里云服务器怎么开启或关闭8080端口?配置新的端口也可使用
1317 0
|
11月前
|
负载均衡 监控 Cloud Native
云原生架构下的微服务治理策略与实践####
在数字化转型浪潮中,企业纷纷拥抱云计算,而云原生架构作为其核心技术支撑,正引领着一场深刻的技术变革。本文聚焦于云原生环境下微服务架构的治理策略与实践,探讨如何通过精细化的服务管理、动态的流量调度、高效的故障恢复机制以及持续的监控优化,构建弹性、可靠且易于维护的分布式系统。我们将深入剖析微服务治理的核心要素,结合具体案例,揭示其在提升系统稳定性、扩展性和敏捷性方面的关键作用,为读者提供一套切实可行的云原生微服务治理指南。 ####
|
监控 网络协议 网络虚拟化
【华为HCIP | 高级网络工程师】刷题日记(6)
【华为HCIP | 高级网络工程师】刷题日记(6)
656 0
|
存储 缓存 算法
python性能问题(Performance Issues)
【7月更文挑战第19天】
252 5
python性能问题(Performance Issues)
|
存储 并行计算 测试技术
NumPy 性能优化:提升 Python 数值计算的速度
【8月更文第30天】Python 是一种广泛使用的编程语言,在科学计算领域尤其受欢迎。然而,由于 Python 的动态类型和解释执行机制,其在处理大规模数值数据时可能会显得相对较慢。为了克服这一限制,NumPy(Numerical Python)库提供了高性能的多维数组对象以及一系列用于操作这些数组的函数。本文将探讨如何利用 NumPy 来提高 Python 中数值运算的效率。
1153 1
|
弹性计算 关系型数据库 MySQL
workbench远程登录ECS
workbench远程登录ECS
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
378 10
|
负载均衡 Java 索引
Spring Cloud:自定义 Ribbon 负载均衡策略
Spring Cloud:自定义 Ribbon 负载均衡策略