共用方式為


Blazor 應用程式裝載模型

小提示

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

Blazor-for-ASP-NET-Web-Forms-Developers 電子書封面縮圖。

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

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

Blazor WebAssembly 應用程式

Blazor WebAssembly 應用程式會在瀏覽器中直接在以 .NET 平台為基礎的運行時間上 WebAssembly執行。 Blazor WebAssembly app 的運作方式類似於 Angular 或 React 等前端 JavaScript 架構。 不過,您不需要撰寫 JavaScript,而是撰寫 C#。 .NET 執行環境會同應用程式元件和任何必要的相依性一起和應用程式下載。 不需要瀏覽器外掛程式或擴充功能。

下載的元件是一般 .NET 元件,就像您在任何其他 .NET 應用程式中使用一樣。 由於運行時間支援 .NET Standard,因此您可以搭配應用程式 BlazorWebAssembly 使用現有的 .NET Standard 連結庫。 不過,這些元件仍會在瀏覽器安全性沙盒中執行。 某些功能可能會擲回 PlatformNotSupportedException,例如嘗試存取檔系統或開啟任意網路連線。

當應用程式載入時,會啟動 .NET 執行環境,並指派至應用程式元件。 應用程式啟動邏輯會執行,並渲染根元件。 Blazor 會根據元件的轉譯輸出來計算UI更新。 接著會套用 DOM 更新。

Blazor WebAssembly

Blazor WebAssembly 應用程式完全在客戶端運行。 這類應用程式可以部署到靜態網站裝載解決方案,例如 GitHub Pages 或 Azure 靜態網站裝載。 伺服器上完全不需要 .NET。 深層連結至應用程式的部分通常需要伺服器上的路由解決方案。 路由解決方案會將要求重新導向至應用程式的根目錄。 例如,您可以使用 IIS 中的 URL 重寫規則來處理此重新導向。

若要取得 Blazor 與全端 .NET Web 開發的所有優點,請使用 ASP.NET Core 裝載您的 BlazorWebAssembly 應用程式。 藉由在用戶端和伺服器上使用 .NET,您可以輕鬆地共用程序代碼,並使用一組一致的語言、架構和工具來建置應用程式。 Blazor 提供方便的範本來設定同時包含 BlazorWebAssembly 應用程式和 ASP.NET Core 主項目的解決方案。 建置解決方案時,來自 Blazor 應用程式的建置靜態檔案是由已設定後援路由的 ASP.NET Core 應用程式所裝載。

Blazor 伺服器應用程式

回想一下 Blazor 架構 討論, Blazor 元件會將輸出轉譯為稱為 RenderTree的中繼抽象概念。 架構 Blazor 接著會比較所轉譯的內容與先前轉譯的內容。 差異會套用至 DOM。 Blazor 元件會與其轉譯輸出的套用方式分離。 因此,元件本身不需要在更新 UI 的進程中執行。 事實上,他們甚至不需要在同一部計算機上執行。

在 Blazor [伺服器應用程式] 中,元件會在伺服器上執行,而不是在瀏覽器中的客戶端執行。 瀏覽器中發生的UI事件會透過即時連線傳送至伺服器。 事件會被分派到正確的元件實例。 元件會渲染,且計算後的 UI 差異會序列化並傳送至應用於 DOM 的瀏覽器。

Blazor 伺服器

Blazor伺服器裝載模型可能讓您感到熟悉,如果您曾經使用 ASP.NET AJAX 和 UpdatePanel 控制項。 控件 UpdatePanel 會處理套用部分頁面更新,以響應頁面上的觸發事件。 觸發時,UpdatePanel 會要求部分更新,然後在不重新整理頁面的情況下套用它。 UI 的狀態是使用 ViewState來管理。 Blazor 伺服器應用程式稍有不同,應用程式需要與用戶端的作用中連線。 此外,伺服器上會維護所有UI狀態。 除了這些差異之外,這兩個模型在概念上都類似。

如何選擇正確的 Blazor 主機模式

主控模型檔所述Blazor,不同的Blazor主控模型有不同的取捨。

托管 BlazorWebAssembly 模型具有下列優點:

  • 沒有 .NET 伺服器端相依性。 下載至客戶端之後,應用程式會正常運作。
  • 可完全運用用戶端資源和功能。
  • 工作可以從伺服器卸載至用戶端。
  • ASP.NET Core 網頁伺服器不需要裝載應用程式。 無伺服器部署案例是可能的(例如,從 CDN 提供應用程式)。

Blazor WebAssembly 托管模型的缺點如下:

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

相反地, Blazor 伺服器裝載模型提供下列優點:

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

伺服器裝載模型的缺點 Blazor 如下:

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

前述取捨可能令人生畏,但您的主機托管模式可以在之後進行變更。 不論選取的 Blazor 裝載模型為何,元件模型都 相同。 原則上,相同的元件可以與任一裝載模型搭配使用。 您的應用程式程式碼不會變更,不過,導入抽象概念是很好的作法,以便讓您的元件保持與裝載模型無關。 抽象概念可讓您的應用程式更輕鬆地採用不同的裝載模型。

部署您的應用程式

ASP.NET Web Forms 應用程式通常裝載於 Windows Server 機器或叢集上的 IIS 上。 Blazor 這些應用程式還可以:

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

在下一節中,我們將探討BlazorWebAssembly和Blazor Server 應用程式的專案是如何設定的。