Blazor 應用程式裝載模型

提示

本內容節錄自《Blazor for ASP NET Web Forms Developers for Azure》電子書，可以從 .NET Docs 取得，也可以免費下載 PDF 離線閱讀。

下載 PDF

Blazor 應用程式可以透過下列其中一種方式裝載：

• 從 WebAssembly 上瀏覽器內的用戶端。
• 從 ASP.NET Core 應用程式中的伺服器端。

BlazorWebAssembly 應用程式

BlazorWebAssembly 應用程式會直接在 WebAssembly 版 .NET Runtime 的瀏覽器中執行。 BlazorWebAssembly 應用程式的運作方式，類似於 Angular 或 React 等前端 JavaScript 架構。 不過，您不需要撰寫 JavaScript，而是撰寫 C#。 .NET 執行階段會隨著應用程式一起下載，同時還會下載應用程式組件以及所有必要的相依性。 不需要瀏覽器外掛程式或延伸模組。

下載的組件是一般 .NET 組件，就像您在所有其他 .NET 應用程式中使用的一樣。 因為執行階段支援 .NET Standard，因此可以使用現有的 .NET Standard 程式庫，與您的 BlazorWebAssembly 應用程式一起使用。 但這些組件仍會在瀏覽器安全性沙箱中執行。 某些功能可能會擲回 PlatformNotSupportedException，例如嘗試存取檔案系統或開啟任意的網路連線。

載入應用程式時，會啟動 .NET Runtime 並指向該應用程式組件。 隨即會執行應用程式啟動邏輯，並轉譯根元件。 然後 Blazor 會依據元件的轉譯輸出，計算 UI 更新。 接著會套用 DOM 更新。

BlazorWebAssembly 應用程式會以純用戶端形式執行。 這類應用程式可以部署到裝載解決方案 (例如 GitHub Pages 或 Azure Static Website Hosting) 的靜態網站。 伺服器上完全不需要 .NET。 深層連結至應用程式的一些部分，通常需要伺服器上的路由解決方案。 路由解決方案會將要求重新導向至應用程式的根目錄。 例如，可以使用 IIS 中的 URL 重寫規則，來處理此重新導向。

若希望獲得 Blazor 的所有優點，以及擁有完整的 .NET Web 開發，請使用 ASP.NET Core 裝載您的 BlazorWebAssembly 應用程式。 藉由在用戶端和伺服器上使用 .NET，您可以輕鬆地共用程式碼，並使用一組一致的語言、架構和工具，來建置應用程式。 Blazor 提供便利的範本，可設定同時包含 BlazorWebAssembly 應用程式和 ASP.NET Core 裝載專案的解決方案。 建置解決方案時，來自 Blazor 應用程式的建置靜態檔案，由已設定後援路由的 ASP.NET Core 應用程式所裝載。

Blazor Server 應用程式

請回想一下 Blazor 架構的討論，Blazor 元件會將其輸出轉譯為稱為 RenderTree 的中繼抽象概念。 Blazor 架構接著會比較所轉譯的內容與先前轉譯的內容。 然後將差異套用至 DOM。 Blazor 元件與如何套用其轉譯的輸無關。 因此，不需要在和更新 UI 的相同處理序中執行元件本身。 事實上，他們甚至不需要在同一部電腦上執行。

在 Blazor Server 應用程式中，元件會在伺服器上執行，而不會在瀏覽器中的用戶端執行。 瀏覽器中發生的 UI 事件，會透過即時連線傳送至伺服器。 事件會分派至正確的元件執行個體。 元件會進行轉譯，而且會對計出的 UI 差異進行序列化，並會傳送至將其套用到 DOM 的瀏覽器。

如果您使用 ASP.NET AJAX 和 UpdatePanel 控制項，可能已略為熟悉 Blazor Server 裝載模型。 控制項 UpdatePanel 可處理套用部分頁面更新，以回應頁面上的觸發事件。 觸發事件時，UpdatePanel 會要求進行部分更新，然後在不需要重新整理頁面的情況下，套用更新。 UI 的狀態使用 ViewState 進行管理。 Blazor Server 應用程式略有不同，應用程式與用戶端之間需要作用中的連線。 此外，所有 UI 狀態皆在伺服器上維護。 除了這些差異之外，這兩個模型在概念上相當類似。

如何選擇正確的 Blazor 裝載模型

如 Blazor 裝載模型文件中所述，不同的 Blazor 裝載模型有不同的取捨。

BlazorWebAssembly 裝載模型具有下列優點：

• 不需相依於 .NET 伺服器端。 下載至用戶端之後，應用程式即可正常運作。
• 可完全運用用戶端資源和功能。
• 工作可以從伺服器卸載至用戶端。
• 裝載應用程式不需要 ASP.NET Core 網頁伺服器。 適用於無伺服器部署案例 (例如，從 CDN 服務應用程式)。

BlazorWebAssembly 裝載模型的缺點如下：

• 瀏覽器功能會限制應用程式。
• 需要足夠的用戶端硬體和軟體 (例如 WebAssembly 支援)。
• 下載大小較大，需要較長的時間載入應用程式。
• .NET Runtime 和工具支援較不成熟。 例如，.NET Standard 支援和偵錯能力有限。

相反地，Blazor Server 裝載模型提供下列優點：

• 下載大小比用戶端應用程式小得多，而且載入應用程式的速度快得多。
• 應用程式能充分運用伺服器功能，包括使用任何與 .NET 相容的 API。
• 伺服器上的 .NET 可用於執行應用程式，讓目前現有的 .NET 工具 (例如偵錯) 可如預期般運作。
• 支援精簡型用戶端。 例如，伺服器端應用程式可使用不支援 WebAssembly 的瀏覽器，以及資源受限裝置上的瀏覽器。
• 應用程式的 .NET/C# 程式碼基底，(包括應用程式的元件程式碼)，不為用戶端提供服務。

Blazor Server 裝載模型的缺點如下：

• UI 延遲較高。 每個使用者互動都會牽動網路躍點。
• 沒有離線支援。 如果用戶端連線失敗，應用程式即會停止運作。
• 對於為許多使用者提供服務的應用程式而言，可擴縮性是一項挑戰。 伺服器必須管理多個用戶端連線，並處理用戶端狀態。
• 需要 ASP.NET Core 伺服器，才能提供應用程式。 不適用於無伺服器部署案例。 例如，無法從 CDN 服務應用程式。

上述取捨清單雖然可能令人生畏，但裝載模型可以稍後再進行變更。 不論選取的 Blazor 裝載模型為何，元件模型都「相同」。 原則上，任一裝載模型都可以使用相同的元件。 您的應用程式程式碼不會變更；但引進抽象概念對於實際執行來說相當有利，能讓元件保持裝載模型中立。 抽象概念能讓您的應用程式更輕鬆地採用不同的裝載模型。

部署您的應用程式

ASP.NET Web Forms 應用程式通常裝載於 Windows Server 電腦或叢集上的 IIS 中。 Blazor 應用程式也可以：

• 以靜態檔案或 ASP.NET Core 應用程式的形式，裝載於 IIS 上。
• 利用 ASP.NET Core 的彈性，可以裝載於各式平台和伺服器基礎結構上。 例如，可以在 Linux 上使用 Nginx 或 Apache，裝載 Blazor 應用程式。 如需如何發佈和部署 Blazor 應用程式的詳細資訊，請參閱Blazor裝載和部署文件。

下一節將探討如何設定 BlazorWebAssembly 和 Blazor Server 應用程式的專案。

上一個下一個