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