Blazor的SSR服务端渲染是不是交互式的

从.NET8开始,Blazor引入了SSR服务端渲染,归功于MVC和RazePage的沉淀,虽然来得晚,但一经发布,就将Blazor推向了新的高度。从今年开始,Youtube上关于Blazor的优质教学视频,以肉眼可见的速度在增加,说明有更多人愿意学习和传播Blazor。Vue和Nuxt.js我都有在用,技术层面,我认为完全是可以去Battle一下的。大家不要停留在BlazorWebAssembly时代,现在Blazor对标的,是Next.js、Nuxt.js。
SSR的东西不多,但如果你像我一样没用过MVC,可能需要一些时间来理解它。如果是刚接触Blazor,我也建议从SSR开始,然后逐步开启BlazorServer、BlazorWebAssembly和Auto等多种渲染模式。

1、传统的请求响应模式

传统Web是经典的请求响应模式,客户端提交请求,服务端处理后,将HTML“整体”返回给客户端,客户端重新刷新“整个”页面,而且请求响应是无状态的,服务端分不清前后两次请求的区别。

2、JS开始介入请求响应过程

每次都请求整个HTML,并刷新整个页面,完全没有必要,因为很多时候,只需要刷新页面的部分数据,于是出现了Ajax。Ajax使用XMLHttpRequest对象,目前趋势是使用fetch。具体原理和过程,请看下一节,基本一样。

3、Blazor的SSR渲染

Blazor的SSR和Ajax基本一样,但有其特点:

  • 首次请求时,返回整体HTML、静态文件、JS脚本-blazor.web.js。其中重点是blazor.web.js,之后的请求和响应都由它来完成,包括响应用户交互事件->向服务器发送请求->处理服务器响应->将更新内容提交给DOM渲染而不需要整体重载页面。这种部分刷新的特性,Blazor称之为增强型导航
  • blazor.web.js内部使用了更加现代的fetch,而不是传统的XMLHttpRequest。Blazor对fetch进行了包装,我们不需要写任何fetch代码,正常使用Blazor语法就行,非常方便。
  • blazor.web.js除了完成请求响应之外,它还负责管理BlazorServer模式的SignalR连接,WebAssembly相关的JS脚本也在里面,以及Auto模式的管理,也靠它。
  • Blazor在这个技术路线上,进一步实现了流式渲染和增强型表单。这两个技术,应该是继承自MVC,MVC了解比较少,知道的朋友可以留言说说。多亏了MVC和RagePage,Blazor的SSR一经面世,就已经成熟可用。
  • 当然,SSR模式下的请求响应,也是无状态的


下图为首次打开页面,下载整个HTML、静态文件和blazor.web.js
image.png
下图为之后跳转路由,都是通过fetch发送请求。
image.png

4、在Blazor的SSR中,利用表单实现响应式数据

以下代码,虽然是SSR渲染,但利用了表单请求的特性,数据提交到服务器处理后可以返回,实现了响应式的经典案例。但这个方式只是奇技淫巧,只适合临时变通一下。如果有响应式数据需求,还是应该使用BlazorServer或者BlazorWasm。

//Enhance为增强型表单带来增强型导航功能,提交表单时,避免重载整个页面
//必须赋值FormName属性,表单数据在客户端和服务端传递时,这个是识别的ID
//要定义隐藏的InputNumber,来承接数据。通过Input将数据传送到服务器,处理后,再传回来。
<EditForm Enhance Model="SsrCounterModel" FormName="ssrCounterForm" OnSubmit="AddCount"><InputNumber @bind-Value="SsrCounterModel!.Num" hidden></InputNumber><p role="status">当前计数: @SsrCounterModel!.Num</p><button class="btn btn-primary" type="submit">增加</button></EditForm>@code {//表单绑定的Model,必须标注SupplyParameterFromForm特性[SupplyParameterFromForm]private SsrCounterModel? SsrCounterModel { get; set; }//在生命周期函数OnParametersSet中完成Model的初始化protected override void OnParametersSet(){SsrCounterModel ??= new SsrCounterModel { Num = 0 };}private void AddCount(){SsrCounterModel!.Num++;}
}

以上案例并不完善,如果快速点击按钮,会出现请求报错,日常开发,不鼓励使用这种方式来实现响应式数据。
image.png

5、总结

不晓得大家有没有深究过“交互式”这个概念,其中有一个特性就是部分更新。另外,我们还通过变通之计,在SSR模式下,实现了响应式数据。从这些角度看,如果有人说SSR也是交互式的,也不好反驳。其实,争论这些没有意义,Blazor这个从社区项目一步步成长起来的技术栈,能够成为AspNetCore的头牌实属不易。作为前端的后起之秀,相比主流框架,它仍然有距离,而C#和WebAssembly也为Blazor提供了很多JS框架所不具备的可能性,它能够玩的空间是非常多的。


关于Blazor渲染模式的分享,我会连续发几篇,大家持续关注交流,有问题评论区见~~~


我是functionMC > function MyClass(){…}
C#/TS/鸿蒙/AI/中美科技竞争等问题,以及如何写Bug、防脱发、送外卖等问题,都可以私信我提问哦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/30000.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[保姆级教程]uniapp实现接口请求和请求方法二次封装

文章目录 新建文件配置方法发送请求使用 新建文件 现在src中新建一个api目录 新建index.js和request.js文件 配置方法发送请求 request.js中输入以下内容 const http {baseUrl: http://127.0.0.1:8000,request(config) {config beforeRequest(config)config.url this…

前端工具篇

在线工具 https://tool.lu/ 程序员工具箱 http://tool.pfan.cn/apitest 配色 https://webkul.github.io/coolhue/ 在线字符串和16进制互转 https://kw360.net/ox2str/ 代码美化截图 https://carbon.now.sh/?bgrgba 菜鸟工具 https://www.jyshare.com/ 文件格式转换 htt…

C++智能指针auto_ptr(有缺陷已废弃)

一、auto_ptr不能共享所有权 auto_ptr类没有拷贝构造函数。可以看出将Right对象的资源释放掉了。 在下面的操作中&#xff0c;ptr1的值给ptr2&#xff0c;那么此时ptr1的值将会为nullptr。在构造和赋值都发生了所有权的转移。调用函数的时候&#xff0c;接收参数的时候同样也会…

Rapidfuzz,一个高效的 Python 模糊匹配神器

目录 01初识 Rapidfuzz 什么是 Rapidfuzz? 为什么选择 Rapidfuzz? 安装 Rapidfuzz 配置 Rapidfuzz 02基本操作 简单比率计算 03高级功能 查找单个最佳匹配 查找多个最佳匹配 使用阈值优化性能 04实战案例…

IPython大师课:提升数据科学工作效率的终极工具

IPython是一个增强的Python交互式shell&#xff0c;它提供了丰富的功能和易用性改进&#xff0c;特别适合进行数据分析、科学计算和一般的Python开发。本文将全面介绍IPython的基本概念、使用方法、主要作用以及注意事项。 一、IPython简介 1. IPython的起源 IPython最初由Fe…

【Android】使用Binder(AIDL)实现利用自定义Bean进行的进程间通信(二)

项目前置 这是我之前写的关于Binder的一些知识点和使用基本数据类型在通信的文章&#xff0c;感兴趣的可以看一下: Binder&#xff08;一&#xff09;Binder的介绍和AIDL使用Binder的实例 项目目标 在两个APP之间进行数据传递&#xff0c;使用Android推荐的Binder通讯&#…

使用Flink接受kafka中的数据并对数据进行ETL

做这个开发是因为&#xff1a;在实际开发操作中&#xff0c;你的kafka主题中会有大量的数据但是需求并不需要所有数据&#xff0c;所有我们要对数据进行清洗&#xff0c;把需要的数据保存在flink流中&#xff0c;为下流的开发做好数据保障&#xff01; 首先创建工具类 再写一…

Golang | Leetcode Golang题解之第151题反转字符串中的单词

题目&#xff1a; 题解&#xff1a; import ("fmt" )func reverseWords(s string) string {//1.使用双指针删除冗余的空格slowIndex, fastIndex : 0, 0b : []byte(s)//删除头部冗余空格for len(b) > 0 && fastIndex < len(b) && b[fastIndex]…

视频与音频的交响:探索达摩院VideoLLaMA 2的技术创新

一、简介 文章&#xff1a;https://arxiv.org/abs/2406.07476 代码&#xff1a;https://github.com/DAMO-NLP-SG/VideoLLaMA2 VideoLLaMA 2是由阿里巴巴集团的DAMO Academy团队开发的视频大型语言模型&#xff08;Video-LLM&#xff09;&#xff0c;旨在通过增强空间-时间建模…

高考分数线一分一段统计汇总(熟练SQL窗口函数)

高考分数线一分一段统计汇总(使用SQL窗口函数) select 总分数&#xff0c; 一分一段人数&#xff0c; sum(一分一段人数) over( order by 总分数 desc) as 累计排名 from( select 总分数&#xff0c; count(考生号) as 一分一段人数 from &#xff08; select 考生号&…

大咖专栏 | AI 时代下,我们可以拥有怎样的数据库?

Hi&#xff0c;各位朋友们&#xff0c;我是 KaiwuDB 高级架构师赵衎衎。 KaiwuDB 始于万物互联时代下千万条数据洪流中&#xff0c;我们持续打磨构造了更加灵活兼容的分布式多模架构&#xff0c;实现了海量异构数据高性能、低成本的集中管理… …这些底层特性都在为后续提供更…

多线程与高并发- Synchronized锁

简介 synchronized 是 Java 语言的一个关键字&#xff0c;它允许多个线程同时访问共享的资源&#xff0c;以避免多线程编程中的竞争条件和死锁问题。synchronized可以用来给对象或者方法进行加锁&#xff0c;当对某个对象或者代码块加锁时&#xff0c;同时就只能有一个线程去执…

界面组件Kendo UI for Angular 2024 Q2亮点 - 让应用程序界面拥有AI提示

随着最新的2024年第二季度发布&#xff0c;Kendo UI for Angular为应用程序开发设定了标准&#xff0c;包括生成式AI集成、增强的设计系统功能和可访问的数据可视化。新的2024年第二季度版本为应用程序界面提供了人工智能(AI)提示&#xff0c;从设计到代码的生产力增强、可访问…

【分数限制下,专科学子将何去何从】

本文仅讲述专科学子 高考之前&#xff0c;咱就是班里中等偏上水平&#xff0c;有时考试考的好点能冲上历年本科线&#xff0c;有时考的差点就直接名落孙山。 现在高考完了&#xff0c;也就可能在本科线周围晃荡&#xff0c;那我接下来该怎么办呢。 是继续上学&#xff0c;还是去…

奇怪的缓存一致性问题

天猫国际用户Push中心承接了国际用户触达相关的需求&#xff0c;比如短信、端内消息投放等等&#xff0c;并存在较高的并发场景。 该系统此前发现了一个查询投放计划plan为null的异常情况&#xff0c;在初期排查时有些丈二和尚摸不着头脑&#xff0c;后面突然灵光乍现——原来是…

Django从入门到精通:First [Django版本.Python面向对象.Web基础.创建Django项目]

文章目录 Django初学者指南1 Django简介1.1 Django的历史1.2 使用Django的知名网站1.4 Django的主要特点1.5 Django的工作原理 2 Django 版本选择2.1 Django 支持的 Python 版本2.2 Django 版本 3 Django 开发 Web 程序3.1 Python知识点3.1.1 Python 函数3.1.2 Python 面向对象…

智能鼠类监测设备

TH-SH1在人类社会与自然环境共存的过程中&#xff0c;鼠类作为一类常见的害虫&#xff0c;给我们的生活、生产带来了诸多不便。为了更好地控制鼠害&#xff0c;科学家们不断研发出各种高效的监测与防控设备。近期&#xff0c;一款全新的鼠类监测设备崭露头角&#xff0c;其能够…

python基础语法学习(工程向)-Stage3-数据可视化

json 是一种轻量的数据交互格式&#xff0c;可以按照json指定的格式去组织和封装数据&#xff0c;而本质上是一个带有特定格式的字符串。 功能 json是在各个编程语言中流通的数据格式&#xff0c;负责不同编程语言之间的数据传递和交互。 格式 json的格式要求较为严格&#…

九、数据结构(并查集)

文章目录 1.并查集操作的简单实现2.解决问题3. 并查集优化3.1 合并的优化3.2查询优化3.3查询优化2 通常用“帮派”的例子来说明并查集的应用背景&#xff1a;在一个城市中有 n ( n < 1 0 6 ) n(n < 10^6) n(n<106)个人&#xff0c;他们分成不同的帮派&#xff0c;给出…

华为HCIP Datacom H12-821 卷6

1.单选题 下面是一台路由器的部分配置&#xff0c;关于该部分配置描述正确的是&#xff0c;[HUAWEllJip ip-prefix plpermit 10.0.192.0 8 greater-equal 17 less-equal 18 A、10.0.192.0/8 网段内&#xff0c;掩码长度为 20 的路由会匹配到该前缀列表&#xff0c;匹配规则为…