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的频率和成本,提高软件开发的效率和质量。辩证地看待这一问题,既要理解其存在的合理性,也要积极寻求改进之道,以实现更好的产品和服务。
529 2
|
8月前
|
机器学习/深度学习 PyTorch API
MindIE Torch快速上手
MindIE Torch 是一款高效的深度学习推理优化工具,支持 PyTorch 模型在 NPU 上的高性能部署。其核心特性包括:1) 子图与单算子混合执行,配合 torch_npu 实现高效推理;2) 支持 C++ 和 Python 编程语言,灵活适配不同开发需求;3) 兼容多种模式(TorchScript、ExportedProgram、torch.compile),覆盖广泛场景;4) 支持静态与动态 Shape 模型编译,满足多样化输入需求。通过简单易用的 API,开发者可快速完成模型加载、编译优化、推理执行及离线模型导出等全流程操作,显著提升开发效率与性能表现。
|
负载均衡 监控 Cloud Native
云原生架构下的微服务治理策略与实践####
在数字化转型浪潮中,企业纷纷拥抱云计算,而云原生架构作为其核心技术支撑,正引领着一场深刻的技术变革。本文聚焦于云原生环境下微服务架构的治理策略与实践,探讨如何通过精细化的服务管理、动态的流量调度、高效的故障恢复机制以及持续的监控优化,构建弹性、可靠且易于维护的分布式系统。我们将深入剖析微服务治理的核心要素,结合具体案例,揭示其在提升系统稳定性、扩展性和敏捷性方面的关键作用,为读者提供一套切实可行的云原生微服务治理指南。 ####
|
存储 缓存 运维
阿里云服务器经济型e与通用算力型u1实例各自性能、适用场景区别及选择参考
在选择阿里云服务器实例规格时,经济型e实例和通用算力型u1实例因其高性价比和广泛适用性,备受个人开发者、中小企业的青睐。在同地域、相同配置的情况下,经济型e和通用算力型u1实例的价格相对于其他实例规格要低一些,很多个人和初创企业用户都会优先考虑选择这两个实例规格的云服务器,那么它们之间有什么区别?各自的性能、适用场景上有何区别?我们应该如何选择呢?本文将详细解析这两款实例的性能特点、适用场景、价格优势及购买建议,帮助用户更好地理解并选择合适的云服务器实例。
636 17
|
监控 网络协议 网络虚拟化
【华为HCIP | 高级网络工程师】刷题日记(6)
【华为HCIP | 高级网络工程师】刷题日记(6)
792 0
|
弹性计算 负载均衡 容灾
阿里云服务器地域和可用区是什么关系?云服务器地域和可用区选择参考
在我们选择阿里云服务器地域的时候,不管是选择国内的云服务器还是国外地域的云服务器,都有多个地域及可用区选择,那么什么是地域?什么是可用区?他们之间有何关系?云服务器地域和可用区应该如何选择呢?本文来为大家做个简单的介绍及选择参考。
阿里云服务器地域和可用区是什么关系?云服务器地域和可用区选择参考
|
存储 缓存 NoSQL
常见的 NoSQL 数据库有哪些?
常见的 NoSQL 数据库有哪些?
846 59
|
存储 缓存 算法
python性能问题(Performance Issues)
【7月更文挑战第19天】
325 5
python性能问题(Performance Issues)
|
新能源
空间太阳能发电:从太空到地球的清洁能源
【10月更文挑战第12天】空间太阳能发电技术是一项具有革命性意义的清洁能源技术。它结合了航天技术与新能源技术的优势,为地球带来了前所未有的清洁能源革命。尽管在实现过程中面临诸多挑战,但随着技术的不断进步和创新,空间太阳能发电有望成为未来全球电力供应的主要来源之一,为人类的可持续发展贡献更多力量。让我们共同期待空间太阳能发电技术的美好未来!
|
网络协议 网络安全 Python
Python 通过UDP传输超过64k的信息
Python 通过UDP传输超过64k的信息
248 0