鳕鱼天空

This is Mr Wang's Tech Blog.

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

合集 - .NET8(6)

1..NET8依赖注入新特性Keyed services2.C#12中的Primary Constructors(主构造函数)

2.C#12中的Primary Constructors(主构造函数)

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

4..NET8 Blazor新特性 流式渲染5.C#12中的Collection expressions(集合表达式语法糖)6.将 .NET Aspire 部署到 Kubernetes 集群

5.C#12中的Collection expressions(集合表达式语法糖)6.将 .NET Aspire 部署到 Kubernetes 集群

6.将 .NET Aspire 部署到 Kubernetes 集群

 

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

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

体验

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

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

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

接着可以看看启动项目中的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。

 

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

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

结论

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

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