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

.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()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

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

运行

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

首先，请将devtools中Applicati服务器托管网on 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按钮，将不再有响应事件发生。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: Linux 中如何安全地抹去磁盘数据？

哈喽大家好，我是咸鱼 离过职的小伙伴都知道，离职的时候需要上交公司电脑，但是电脑里面有许多我们的个人信息（聊天记录、浏览记录等等） 所以我们就需要先把这些信息都删除，确保无法恢复之后才上交 即有些情况下我们不得不以一种确保无法恢复的方式从磁盘上擦除所有信息 许…