Blazor(4)-Blazor 裝載模型

我們在建立專案時,有看到Blazor Server及Blazor WebAssembly(wasm)兩種Blazor專案。 這兩個專案就是在簡介時有提到的Server Side及Client Side。本篇我們來探討這兩種專案的架構及優缺點。

Blazor WebAssembly

圖:Blazor WebAssembly Model架構, 圖片來源

wasm是Client Side的專案,程式會部屬成靜態檔案至Web Server,所有UI及事件皆會在客戶端直接處理

wasm模型的優點:

  1. 事件及UI完全由瀏覽器處理,減少與Server的溝通,降低Server的負擔
  2. 沒有Server的相依性,當伺服器離線時,程式仍可正常運作。
  3. 以靜態網站的方式部屬,可以不需要.net core Web Server來裝載程式。

wasm模型的缺點:

  1. 初次載入速度慢,需下載大量套件(如JS程式包及.net runtime)。
  2. 瀏覽器需支援WebAssembly技術。
  3. 傳送至用戶端的程式碼無法受到竄改保護。

Blazor Server

圖:Blazor Server Model架構, 圖片來源

從名字來看就知道,他是Server Side的專案,Client端會與Server端建立BlazorSignalR連線進行事件處理。

Blazor Server模型的優點:

  1. 初次使用時下載資源遠小於wasm專案。
  2. 程式運行在Server上,.net工具(如偵錯)能夠正常工作。
  3. C#程式碼基底不會提傳送給用戶端。

Blazor Server模型的缺點:

  1. 每次事件、使用者互動都需要與後端溝通,使用者體驗較差。
  2. 當用戶連線失敗時所有互動功能皆無法使用。
  3. 需使用非常大量的伺服器資源。

Blazor 裝載模型的比較

Blazor wasm Blazor Server
初次載入速度
使用者體驗
是否需要Server部屬 不需要 需要
瀏覽器支援 部分瀏覽器不支援
An unhandled error has occurred. Reload 🗙