晨曦飘雪 发表于 2023-11-18 12:34:57

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

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

[*]静态渲染,这种页面只可显示,不提供交互,可用于网页内容展示
[*]使用Blazor Server托管的通过Server交互方式
[*]使用WebAssembly托管的在浏览器端交互方式
[*]使用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按钮,将不再有响应事件发生。
 

来源:https://www.cnblogs.com/chenyishi/archive/2023/11/18/17838398.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: .NET8 Blazor的Auto渲染模式的初体验