Copyright notice: This article is an original article and follows
CC 4.0 BY-NC-ND
Copyright agreement. If you want to repost this article, please attach the original source link and this statement.
Source link:
https://www.v2know.com/MainPage/PreView/1083
在 .NET 8 混合 Blazor Web App 模式下，你的解決方案通常包含兩個專案：一個伺服器專案（例如 v2knowBlazor）和一個客戶端專案（例如 v2knowBlazor.Client）。在這個架構中，實際運行應用程序的是伺服器專案，它同時負責 host 和提供客戶端的 Blazor WASM 應用。
關鍵流程
1. 服務註冊
在 v2knowBlazor 的 Program.cs 中，我們看到以下代碼：
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
這三行程式碼中：
- AddRazorComponents()：添加 Razor 組件相關服務。
- AddInteractiveServerComponents()：配置伺服器端交互式組件。
- AddInteractiveWebAssemblyComponents()：加入客戶端 Blazor WASM 所需服務，使得客戶端組件可以被 host。
2. 組件映射
接著，配置 HTTP 請求管道時，使用下列代碼映射 Razor 組件，並把客戶端專案中的組件程序集加入進來：
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(v2knowBlazor.Client._Imports).Assembly);
重點解讀：
- MapRazorComponents<App>()：將主組件
App映射到應用根路由上。 - AddInteractiveServerRenderMode() 與 AddInteractiveWebAssemblyRenderMode()：同時配置伺服器和客戶端的渲染模式。
- AddAdditionalAssemblies(...)：確保客戶端的組件（定義在 v2knowBlazor.Client 中）能正確注入，從而啟動並提供給瀏覽器。
3. 啟動應用
最後，透過 app.Run(); 啟動整個應用：
app.Run();
此時，伺服器專案已經啟動，並同時 host 起了客戶端 Blazor WASM 應用。當你在瀏覽器中訪問應用時，伺服器不僅提供 API 和後端邏輯，同時也把客戶端資源傳送給瀏覽器執行。
小結
在這份混合 Blazor 應用中，關鍵在於 Server 專案通過以下代碼段 host 和啟動客戶端專案：
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(v2knowBlazor.Client._Imports).Assembly);
app.Run();
這段代碼完成了：
- 註冊 Razor 組件和交互模式：使伺服器能夠處理客戶端（WASM）所需的服務。
- 映射客戶端組件：通過附加客戶端組件程序集，確保客戶端能被正確載入。
- 啟動應用：
app.Run();將上述所有配置應用並運行伺服器。
這樣的架構使得混合開發模式在一個應用程式中同時具備伺服器端與客戶端的功能，既靈活又便於擴展。希望這篇博客能幫助你更清晰地理解 .NET 8 混合 Blazor 的運作方式。