ASP.NET Core Blazor 裝載模型

本文說明 Blazor 裝載模型，主要著重於 .NET 8 之前的 .NET 版本中的 Blazor Server 和 Blazor WebAssembly 應用程式。 本文中的指引適用於所有 .NET 版本中執行於原生行動和桌面平台上的 Blazor Hybrid 應用程式。 .NET 8 或更新版本中的 Blazor Web App 可透過 Razor 元件的轉譯方式 (即所謂的轉譯模式) 更妥善地概念化。 轉譯模式在基礎知識概觀一文中有簡短的介紹，詳細說明請見元件節點的 ASP.NET Core Blazor 轉譯模式。

Blazor 是建置 Web UI 元件 (Razor 元件) 的 Web 架構，可透過不同方式裝載。 Razor 元件可以在 ASP.NET Core (Blazor Server) 的伺服器端執行，和在 WebAssembly 型 .NET 執行階段 (Blazor WebAssembly，Blazor WASM) 瀏覽器的用戶端執行。 您也可以在原生行動裝置和傳統型應用程式中裝載 Razor 元件，以轉譯為內嵌 Web View 控制項 (Blazor Hybrid)。 不論裝載模型為何，建置 Razor 元件的方式都相同。 相同的 Razor 元件可以搭配任何未變更的裝載模型使用。

Blazor Server

使用 Blazor Server 裝載模型，元件會從 ASP.NET Core 應用程式內在伺服器上執行。 UI 更新、事件處理和 JavaScript 呼叫是透過使用 WebSockets 通訊協定的 SignalR 連線處理。 與每個連線用戶端相關聯的伺服器上狀態稱為線路。 線路不會繫結至特定網路連線，而且可以允許發生暫時網路中斷和連線中斷時用戶端嘗試重新連線到伺服器。

在傳統的伺服器轉譯應用程式中，在多個瀏覽器畫面 (索引標籤或 iframes) 中開啟相同的應用程式，通常不會轉譯為伺服器上的其他資源需求。 對於裝載 Blazor Server 模型，每個瀏覽器畫面都需要伺服器管理元件狀態的個別線路和個別執行個體。 Blazor 考慮關閉瀏覽器索引標籤或瀏覽至外部 URL 正常終止。 在正常終止的情況下，線路和相關聯的資源會立即釋放。 例如，用戶端也可能因為網路中斷而無法正常中斷連線。 Blazor Server 會將已中斷連線的線路儲存一段可設定的間隔時間，以允許用戶端重新連線。

在用戶端上，Blazor 指令碼會建立與伺服器的 SignalR 連線。 指令碼會從 ASP.NET Core 共用架構中的內嵌資源提供。

Blazor Server 裝載模型提供數個優點：

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

Blazor Server 裝載模型具有下列限制：

• 通常有較高的延遲。 每個使用者互動都會牽動網路躍點。
• 沒有離線支援。 如果用戶端連線失敗，互動功能就會失敗。
• 使用多個使用者調整應用程式需要伺服器資源，以處理多個用戶端連線和用戶端狀態。
• 需要 ASP.NET Core 伺服器，才能提供應用程式。 無法使用無伺服器部署情節，例如從內容傳遞網路 (CDN) 提供應用程式。

我們建議針對採用 Blazor Server 裝載模型的應用程式使用 Azure SignalR Service。 此服務允許將 Blazor Server 應用程式向上擴充為大量的並行 SignalR 連線。

Blazor WebAssembly

Blazor WebAssembly 裝載模型會在 WebAssembly 型 .NET 執行階段的瀏覽器中執行元件用戶端。 Razor 元件、其相依性和 .NET 執行階段會下載至瀏覽器。 元件會直接在瀏覽器 UI 執行緒上執行。 UI 更新和事件處理會在相同的流程中發生。 資產會作為靜態檔案部署至能夠將靜態內容提供給用戶端的網頁伺服器或服務。

Blazor Web 應用程式可以使用 Blazor WebAssembly 裝載模型來啟用用戶端互動功能。 當應用程式建立為以獨佔方式在 Blazor WebAssembly 裝載模型上執行，而不使用伺服器端轉譯和互動時，該應用程式稱為獨立Blazor WebAssembly應用程式。

當獨立 Blazor WebAssembly 應用程式使用後端 ASP.NET Core 應用程式來提供其檔案時，該應用程式稱為裝載Blazor WebAssembly應用程式。 使用裝載的 Blazor WebAssembly，您可以使用 .NET 取得完整的堆疊 Web 開發體驗，包括能夠在用戶端與伺服器應用程式之間共用程式碼、預先轉譯支援，以及與 MVC 和 Razor Pages 整合。 裝載的用戶端應用程式可以使用各種傳訊架構和通訊協定，透過網路與其後端伺服器應用程式互動，例如 Web API、gRPC-web 及 SignalR (使用 ASP.NET CoreSignalR 搭配 Blazor)。

建置為漸進式 Web 應用程式 (PWA) 的 Blazor WebAssembly 應用程式會使用新式瀏覽器 API 來啟用原生用戶端應用程式的許多功能，例如離線運作、在自己的應用程式視窗中執行、從主機的作業系統啟動、接收推播通知，以及在背景中自動更新。

Blazor 指令碼會處理：

• 下載 .NET 執行階段、Razor 元件，以及元件的相依性。
• 執行階段的初始化。

發佈的應用程式大小 (其「承載大小」) 是應用程式使用性的重要效能因素。 大型應用程式需要相對較長的時間才能下載至瀏覽器，這點會對使用者體驗造成傷害。 Blazor WebAssembly 對承載大小進行最佳化，以縮短下載時間：

• 若應用程式是透過中繼語言 (IL) 修剪器所發佈的，則會移除未使用的程式碼。
• HTTP 回應會進行壓縮。
• .NET 執行階段與組件會在瀏覽器中進行快取。

Blazor WebAssembly 裝載模型提供數個優點：

• 針對獨立 Blazor WebAssembly 應用程式，從伺服器下載應用程式後並沒有 .NET 伺服器端相依性，因此如果伺服器離線，應用程式仍可正常運作。
• 可完全運用用戶端資源和功能。
• 工作可以從伺服器卸載至用戶端。
• 針對獨立 Blazor WebAssembly 應用程式，不需要 ASP.NET Core Web 伺服器便可裝載應用程式。 可使用無伺服器部署情節，例如從內容傳遞網路 (CDN) 提供應用程式。

Blazor WebAssembly 裝載模型具有下列限制：

• Razor 元件僅限於瀏覽器的功能。
• 需要足夠的用戶端硬體和軟體 (例如 WebAssembly 支援)。
• 下載大小較大，需要較長的時間載入元件。
• 傳送至用戶端的程式碼無法受到保護，以免於使用者檢查和竄改。

.NET 中繼語言 (IL) 解譯器包含部分 Just-In-Time (JIT) 執行階段支援，以改善執行階段效能。 JIT 解譯器會將解譯器位元組程式碼的執行最佳化，方法是使用 WebAssembly 程式碼的小型 Blob 來取代這些程式碼。 除偵錯之外，系統會自動為 Blazor WebAssembly 應用程式啟用 JIT 解譯器。

Blazor 支援預先 (AOT) 編譯，您可以在其中直接將 .NET 程式碼編譯成 WebAssembly。 AOT 編譯會導致執行階段的效能提升，但代價是應用程式會比較大。 如需詳細資訊，請參閱 ASP.NET Core Blazor WebAssembly 建置工具和預先 (AOT) 編譯。

用於 AOT 編譯的相同 .NET WebAssembly 建置工具也會重新連結 .NET WebAssembly 執行階段來修剪未使用的執行階段程式碼。 Blazor 也會從 .NET Framework 程式庫修剪未使用的程式碼。 .NET 編譯器會針對較小的應用程式承載進一步預先壓縮獨立 Blazor WebAssembly 應用程式。

WebAssembly 轉譯的 Razor 元件可以使用建置在 WebAssembly 上執行的原生相依性。

Blazor Hybrid

Blazor 也可以用來使用混合式方法建置原生用戶端應用程式。 混合式應用程式是利用 Web 技術執行其功能的原生應用程式。 在 Blazor Hybrid 應用程式中，Razor 元件會直接在原生應用程式中 (不在 WebAssembly 上) 搭配任何其他 .NET 程式碼執行，並根據 HTML 和 CSS 將 Web UI 轉譯為透過本機 Interop 通道的內嵌 Web View 控制項。

Blazor Hybrid 應用程式可以使用不同的 .NET 原生應用程式架構來建置，包括 .NET MAUI、WPF 和 Windows Forms。 Blazor 提供 BlazorWebView 控制項，以將 Razor 元件新增至使用這些架構建置的應用程式。 搭配 .NET MAUI 使用 Blazor 可提供便利的方式，來建置適用於行動和桌面的跨平台 Blazor Hybrid 應用程式，而與 WPF 和 Windows Forms 的 Blazor 整合，是將現有應用程式現代化的絕佳方式。

由於 Blazor Hybrid 應用程式是原生應用程式，因此可支援只透過 Web 平台無法使用的功能。 Blazor Hybrid 應用程式可透過一般 .NET API 完整存取原生平台功能。 Blazor Hybrid 應用程式也可以與現有的 Blazor Server 或 Blazor WebAssembly 應用程式共用和重複使用元件。 Blazor Hybrid 應用程式結合了 Web、原生應用程式和 .NET 平台的優點。

Blazor Hybrid 裝載模型提供數個優點：

• 重複使用可跨行動、桌面和 Web 共用的現有元件。
• 運用 Web 開發技能、體驗和資源。
• 應用程式具有裝置原生功能的完整存取權。

Blazor Hybrid 裝載模型具有下列限制：

• 每個目標平台都必須建置、部署和維護個別的原生用戶端應用程式。
• 原生用戶端應用程式通常需要較長的時間才能在瀏覽器中尋找、下載並安裝 Web 應用程式。

如需詳細資訊，請參閱 ASP.NET Core Blazor Hybrid。

如需 Microsoft 原生用戶端架構的詳細資訊，請參閱下列資源：

• .NET Multi-platform App UI (.NET MAUI)
• Windows Presentation Foundation (WPF)
• Windows Forms \(英文\)

我應該選擇哪個 Blazor 裝載模型？

元件的裝載模型是由其轉譯模式所設定 (無論是在編譯時間還是執行階段)，並在 ASP.NET Core Blazor 轉譯模式中使用範例說明。 下表顯示設定轉譯模式以判斷元件裝載模型的主要考量事項。 針對獨立 Blazor WebAssembly 應用程式，所有應用程式的元件都會以 Blazor WebAssembly 裝載模型在用戶端上轉譯。

Blazor Hybrid 應用程式包括 .NET MAUI、WPF 和 Windows Forms 架構應用程式。

功能	Blazor Server	Blazor WebAssembly (WASM)	Blazor Hybrid
完成 .NET API 相容性	✔️支援	❌不支援	✔️支援
直接存取伺服器和網路資源	✔️支援	❌不支援†	❌不支援†
具有快速初始載入時間的小型承載大小	✔️支援	❌不支援	❌不支援
接近原生執行速度	✔️支援	✔️支援‡	✔️支援
伺服器上的應用程式程式碼安全且私人	✔️支援	❌不支援†	❌不支援†
下載後離線執行應用程式	❌不支援	✔️支援	✔️支援
靜態網站裝載	❌不支援	✔️支援	❌不支援
將處理卸載至用戶端	❌不支援	✔️支援	✔️支援
原生用戶端功能的完整存取權	❌不支援	❌不支援	✔️支援
Web 型部署	✔️支援	✔️支援	❌不支援

†Blazor WebAssembly 和 Blazor Hybrid 應用程式可以使用伺服器型 API 來存取伺服器/網路資源，以及存取私人且安全的應用程式程式碼。
‡Blazor WebAssembly 使用預先 (AOT) 編譯只會達到接近原生的效能。

選擇應用程式的裝載模型之後，您可以從 Blazor 專案範本產生 Blazor Server 或 Blazor WebAssembly 應用程式。 如需詳細資訊，請參閱 ASP.NET Core Blazor 工具。

若要建立 Blazor Hybrid 應用程式，請參閱 ASP.NET Core Blazor Hybrid 教學課程下的文章。

完成 .NET API 相容性

針對 Blazor Server 裝載模型和 Blazor Hybrid 應用程式轉譯的元件具有完整 .NET API 相容性，而針對 Blazor WebAssembly 轉譯的元件僅限於 .NET API 的子集。 當應用程式規格需要 WebAssembly 轉譯元件無法使用的一或多個 .NET API 時，請選擇 Blazor Server 的轉譯元件或使用 Blazor Hybrid。

直接存取伺服器和網路資源

針對 Blazor Server 裝載模型轉譯的元件可直接存取應用程式執行位置的伺服器和網路資源。 由於使用 Blazor WebAssembly 或 Blazor Hybrid 裝載的元件在用戶端上執行，因此無法直接存取伺服器和網路資源。 元件可以透過受保護的伺服器型 API 間接存取伺服器和網路資源。 伺服器型 API 有可能透過協力廠商程式庫、套件和服務來取得。 請將下列考量事項納入考慮：

• 協力廠商程式庫、套件和服務可能有較高實作和維護成本、未得到良好支援，或帶來安全性風險。
• 如果您的組織在內部開發一或多個伺服器型 API，則需要額外的資源來建置並維護這些 API。

使用 Blazor Server 裝載模型，以避免需要從伺服器環境公開 API。

具有快速初始載入時間的小型承載大小

從伺服器轉譯元件可減少應用程式承載大小，並改善初始載入時間。 需要快速的初始載入時間時，請使用 Blazor Server 裝載模型或考慮使用靜態伺服器端轉譯。

接近原生執行速度

Blazor Hybrid 應用程式會在目標平台上以原生方式使用 .NET 執行階段執行，以提供最佳的速度。

針對 Blazor WebAssembly 裝載模型轉譯的元件，包括漸進式 Web 應用程式 (PWA)，以及使用 WebAssembly 適用 .NET 執行階段執行的獨立 Blazor WebAssembly 應用程式，這比直接在平台上執行的速度慢。 請考慮使用預先 (AOT) 編譯，以改善使用 Blazor WebAssembly 時的執行階段效能。

伺服器上的應用程式程式碼安全且私人

在伺服器上安全且私人地維護應用程式程式碼，是針對 Blazor Server 裝載模型轉譯的元件內建功能。 使用 Blazor WebAssembly 或 Blazor Hybrid 裝載模型轉譯的元件可以使用伺服器型 API，來存取必須保持私人且安全的功能。 如直接存取伺服器和網路資源一節中所述，開發和維護伺服器型 API 的考量事項在此適用。 如果伺服器型 API 的開發和維護不適合維護安全且私人的應用程式程式碼，請轉譯 Blazor Server 裝載模型的元件。

下載後離線執行應用程式

建置為漸進式 Web 應用程式 (PWA) 的獨立 Blazor WebAssembly 應用程式和 Blazor Hybrid 應用程式可以離線執行，當用戶端無法連線到網際網路時，這會特別有用。 當與伺服器的連線遺失時，針對 Blazor Server 裝載模型轉譯的元件無法執行。 如果應用程式必須離線執行，獨立 Blazor WebAssembly 和 Blazor Hybrid 是最佳選擇。

靜態網站裝載

獨立 Blazor WebAssembly 應用程式可以裝載靜態網站，因為這些應用程式會作為一組靜態檔案下載到用戶端。 獨立 Blazor WebAssembly 應用程式不需要伺服器執行伺服器端程式碼才能下載並執行，並可透過內容傳遞網路 (CDN) (例如 Azure CDN) 傳遞。

雖然 Blazor Hybrid 應用程式會編譯成一或多個獨立式部署資產，但資產通常會透過協力廠商應用程式市集提供給用戶端。 如果靜態裝載是應用程式需求，請選取獨立 Blazor WebAssembly。

將處理卸載至用戶端

Blazor WebAssembly 和 Blazor Hybrid 應用程式在用戶端上執行，因而可將處理卸載給用戶端。 Blazor Server 應用程式在伺服器上執行，因此伺服器資源需求通常會隨著使用者數目和每個使用者所需的處理量而增加。 當可以將大部分或所有應用程式的處理卸載給用戶端，以便應用程式處理大量資料時，Blazor WebAssembly 或 Blazor Hybrid 是最佳選擇。

原生用戶端功能的完整存取權

Blazor Hybrid 應用程式可透過 .NET 原生應用程式架構完整存取原生用戶端 API 功能。 在 Blazor Hybrid 應用程式中，Razor 元件會直接在原生應用程式中執行，而不是在 WebAssembly 上執行。 當需要完整的用戶端功能時，Blazor Hybrid 是最佳選擇。

Web 型部署

Blazor Web 應用程式會在瀏覽器的下一次應用程式重新整理時更新。

Blazor Hybrid 應用程式是通常需要安裝程式和平台特定部署機制的原生用戶端應用程式。

設定元件的裝載模型

若要在編譯時間或以動態方式在執行階段將元件的裝載模型設定為 Blazor Server 或 Blazor WebAssembly，請設定其轉譯模式。 轉譯模式會在 ASP.NET Core Blazor 轉譯模式一文中完整說明及示範。 不建議您直接從本文跳至轉譯模式文章，而不閱讀這兩篇文章之間的文章內容。 例如，藉由查看 Razor 元件範例，可以更容易地瞭解轉譯模式，但在達到 ASP.NET Core Blazor 基本概念一文之前，並不會涵蓋基本 Razor 元件結構和函式。 在使用轉譯模式一文中的元件範例之前，先瞭解 Blazor 的專案範本和工具也很有幫助。