.NET8 Blazor的Auto渲染模式的初体验

这篇具有很好参考价值的文章主要介绍了.NET8 Blazor的Auto渲染模式的初体验。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

.NET8发布后,Blazor支持四种渲染方式

  1. 静态渲染,这种页面只可显示,不提供交互,可用于网页内容展示
  2. 使用Blazor Server托管的通过Server交互方式
  3. 使用WebAssembly托管的在浏览器端交互方式
  4. 使用Auto自动交互方式,最初使用 Blazor Server,并在随后访问时使用 WebAssembly 自动进行交互式客户端呈现。 自动呈现通常会提供最快的应用启动体验。

 文章来源地址https://www.toymoban.com/news/detail-749071.html

体验

通过VS创建Blazor应用时,选择Blazor Web App这个新模板。过程中可以看到有四种模板可供选择。我们可以选择Auto来体验。  

.NET8 Blazor的Auto渲染模式的初体验

新建Auto后,可以看到项目模板为我们创建了两个项目:BlazorApp与BlazorApp.Client

其中BlazorApp为启动项目,BlazorApp.Client为一个组件库

.NET8 Blazor的Auto渲染模式的初体验

接着可以看看启动项目中的Program,一个明显的变化是,.NET8中的blazor通过添加插件方式开启了Blazor Server与WebAssembly两种交互方式。不加的话其实就是静态模式。

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

...
    
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

交互模式的设置可以在Blazor.App.Client项目中的Counter中看到,使用了一个指令来设置渲染方式@rendermode InteractiveAuto

 

运行

我们可以尝试将项目运行起来,切换到counter路由并查看他如何自动切换交互方式。

首先,请将devtools中Application Tab页中的Cache Storage清空,防止已缓存的wasm文件影响测试效果。

然后,可以通过devtools中的request blocking功能先将wasm全部block。

.NET8 Blazor的Auto渲染模式的初体验

我们可以发现虽然wasm都请求失败,但是Auto模式采用Blazor Server的方式通信,在点击按钮后,交互仍然生效

.NET8 Blazor的Auto渲染模式的初体验

然后我们可以去掉对wasm的block,重新刷新页面,并点击Counter按钮后,wasm交互也生效

.NET8 Blazor的Auto渲染模式的初体验

结论

因此验证Auto模式下,在wasm下载未完成或失败的情况下,使用Blazor Server方式交互。在wasm下载完成后使用WebAssembly方式在浏览器端交互,提高用户的体验。

另外,如果想体验静态交互,可以将Counter组件中的渲染方式@rendermode InteractiveAuto去掉,即可体验静态交互的方式,静态交互的方式中点击Counter按钮,将不再有响应事件发生。

 

到了这里,关于.NET8 Blazor的Auto渲染模式的初体验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【AI绘图】初见·小白入门stable diffusion的初体验

    首先,感谢赛博菩萨秋葉aaaki的整合包 stable diffusion还是挺好上手的(如果使用整合包的话),看看界面功能介绍简单写几个prompt就能生成图片了。 我在网上找了一张赛博朋克边缘行者Lucy的cos图,可能会侵权就不放原图了。 这里讲一下如何获取prompt,最无脑的办法就是找一张

    2024年02月20日
    浏览(47)
  • ConfigureAwait in .NET8

    首先,让我们回顾一下原版 ConfigureAwait 的语义和历史,它采用了一个名为 continueOnCapturedContext 的布尔参数。 当对任务( Task 、 TaskT 、 ValueTask 或 ValueTaskT )执行 await 操作时,其默认行为是捕获“上下文”的;稍后,当任务完成时,该 async 方法将在该上下文中继续执行。“上

    2024年02月05日
    浏览(43)
  • Net8 EFCore Mysql 连接

    一、安装插件 Pomelo.EntityFrameworkCore.MySq (这里要选8.0.0以上版本低版本不支持.net8) 二、配置数据库连接串  appsettings.json 中配置数据库连接串 三、添加实体类Student和数据库上下文 新建 Entities 目录,在,根据表及字段,在目录下新建 Student 实体类,在类上加  [Table(\\\"student\\\")] 表

    2024年02月22日
    浏览(49)
  • 【我和Python算法的初相遇】——体验递归的可视化篇

    🌈个人主页: Aileen_0v0 🔥系列专栏:PYTHON数据结构与算法学习系列专栏 💫 \\\"没有罗马,那就自己创造罗马~\\\"  目录 递归的起源 什么是递归?  利用递归解决列表求和问题 递归三定律 递归应用-整数转换为任意进制数 递归可视化  画一个正方形  画一个五角星  画一个九边形 

    2024年02月05日
    浏览(40)
  • 在NET8中使用简化的 AddJwtBearer 认证

    系统版本: win10 .NET SDK: NET8 开发工具:vscode 参考引用:使用 dotnet user-jwts 管理开发中的 JSON Web 令牌 注意:以下示例中的端口、token等需替换成你的环境中的信息 运行以下命令来创建一个空的 Web 项目,并添加 Microsoft.AspNetCore.Authentication.JwtBearer NuGet 包: 将 Program.cs 的内容替

    2024年02月05日
    浏览(40)
  • .NET8依赖注入新特性Keyed services

    什么是Keyed service Keyed service是指,为一个需要注入的服务定义一个Key Name,并使用使用Key Name检索依赖项注入 (DI) 服务的机制。 使用方法 通过调用 AddKeyedSingleton (或 AddKeyedScoped 或 AddKeyedTransient)来注册服务,与Key Name相关联。或使用 [FromKeyedServices] 属性指定密钥来访问已注册

    2024年02月05日
    浏览(55)
  • .Net8顶级技术:边界检查之IR解析(二)

    IR技术应用在各个编程语言当中,它属于JIT的核心部分,确实有点点麻烦。但部分基本明了。本篇通过.Net8里面的边界检查的小例子了解下。前情提要,看这一篇之前建议看看前一篇:点击此处,以便于理解。 1.前奏 先上C#代码: Test函数经过Roslyn编译成IL代码之后,会被JIT导

    2024年02月06日
    浏览(45)
  • .NET8 和 Vue.js 的前后端分离

    在.NET 8中实现前后端分离主要涉及到两个部分:后端API的开发和前端应用的开发。后端API通常使用ASP.NET Core来构建,而前端应用则可以使用任何前端框架或技术栈,比如Vue.js、React或Angular等。下面是一个简化的步骤指南,帮助你在.NET 8中实现前后端分离。 下面是一个简单的示

    2024年04月10日
    浏览(44)
  • NET8 ORM 使用AOT SqlSugar 和 EF Core

    .Net8的本地预编机器码NET AOT,它几乎进行了100%的自举。微软为了摆脱C++的钳制,做了很多努力。也就是代码几乎是用C#重写,包括了虚拟机,GC,内存模型等等。而需要C++做的,也就仅仅是引导程序,本篇通过代码来看下这段至关重要的引导程序的运作模式。      SqlSugar已经

    2024年02月05日
    浏览(55)
  • U8二次开发CO-基于Net8调用COM对象

    以前没有碰过U8,只知道基于Net平台构建,本次业务需求是要把钉钉和U8打通,完成代办和消息提醒。网上搜索U8相关二开资料后发现,都是一些技术片段,零零碎碎的不成体系,也有可能是大客户都去U9或者Cloud了,老旧的8面临过气与替换(个人意见),遂边琢磨边做一些示

    2024年04月14日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包