.NET8 Blazor的Auto渲染模式的初體驗

chester·chen發表於2023-11-18

.NET8釋出後,Blazor支援四種渲染方式

  1. 靜態渲染,這種頁面只可顯示,不提供互動,可用於網頁內容展示
  2. 使用Blazor Server託管的透過Server互動方式
  3. 使用WebAssembly託管的在瀏覽器端互動方式
  4. 使用Auto自動互動方式,最初使用 Blazor Server,並在隨後訪問時使用 WebAssembly 自動進行互動式客戶端呈現。 自動呈現通常會提供最快的應用啟動體驗。

 

體驗

透過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按鈕,將不再有響應事件發生。