Asp.net core blazor vs .net core mvc with razor
使用 razor 與 blazor 之間的架構區別是什麼？
文件建議我在使用 blazor 時必須編寫一個 Web Api - 是否仍然可以像在傳統 razor 中一樣傳遞模型對象？
0 帶有視覺解釋的影片
我決定製作一個影片，因為有人提出了關於 Blazor 的幾個問題（也在其他論壇上），而且這種格式對我來說似乎更好地視覺化差異 - 而不是重複我的（更長的）解釋。與我的第一篇文章相比，該影片包含了一些改進的版本（文本文章也已更新）這是我第一個採用這種格式的影片，因此歡迎任何回饋。如果您喜歡閱讀沒有太多視覺化的經典文本，您會在以下部分中找到它的內容。當然沒有demo，我為了減輕內容而做的，但基本資訊內容是一樣的。
- 什麼是傳統的多頁網站或應用程序？
首先，您需要對傳統網站/應用程序的工作原理有一個基本的了解：對於每個呼叫/請求，您都會向伺服器發送一個請求，伺服器會以整個頁面的*完整HTML 進行響應。*這可以像使用 ASP.NET Core MVC 和 Razor 模板或 Razor 頁面，甚至是 PHP、Java、Python 等其他技術一樣動態生成。假設您有一個顯示預覽的文章列表。
為了說明這一點，假設您有一個顯示預覽的文章列表（例如部落格文章）。當使用者點擊read all時，在傳統的 Web 應用程序中，您通常有兩種方式來實現這一點：
- 載入像 /view-article?id=123 這樣的頁面，上面再次發生：載入文章頁面的整個 HTML DOM
- 使用 JavaScript 發出 Ajax-Request，它從 /api/get-article?id=123 之類的 API 載入所需的內容並操縱 DOM 以將其顯示在所需的位置
沒有 JavaScript，傳統網站就沒有互動性。這意味著：在頁面載入和渲染之後，什麼也沒有發生——除了使用者通過點擊連結載入另一個頁面（帶有整個 DOM）——因此，它被稱為“多頁面”應用程序。
您可能會更喜歡第二種方法，因為它更快並節省資源：您無需再次渲染整個頁面（其中只有一部分已更改），而是留在該頁面上並載入您需要的新資訊（文章本例中的內容）。尤其是在需要載入和呈現許多資源的大頁面上，JavaScript 方法對使用者來說感覺要快得多。
如果您希望傳統頁面具有互動性，則需要 JavaScript。例如，您可以向某些 API 添加 ajax 呼叫，在使用者點擊按鈕時顯示一些數據，而無需重新載入整個頁面。
簡而言之，我們可以說，大部分工作都發生在伺服器端。
2.與單頁應用（SPA）的區別在哪裡？
就完整呈現的 html 頁面而言，SPA 只有一個*頁面。*如果您通過點擊文章導航到那裡，它們會載入一個 JavaScript 應用程序。它處理那裡的所有互動。如果使用者點擊一篇文章，則沒有從伺服器獲取完整的 HTML 文件！相反，它只獲取更改的部分，在本例中為文章。其他所有內容（例如導航欄、頁腳、小元件等）將保留在與多頁應用程序相反的位置，如果不使用 js/ajax，則可能會重新載入。
您通常在那裡有模組化組件和雙向數據綁定。這意味著，變數連結到某個 HTML 元素。當變數發生變化時，元素會自動顯示新值。在傳統應用程序中，您必須手動創建事件處理程序來處理此問題。它可以被視為使用 vanilla JavaScript 繼續開發單頁應用程序，您需要更多的手動工作來歸檔數據綁定等內容。
對於使用者而言，SPA 通常比在多頁應用程序上瀏覽頁面要快得多。
簡而言之，我們可以說，大部分工作都發生在使用者瀏覽器的客戶端。伺服器只提供靜態內容（html、js、css）並提供 API 用於例如從數據庫中獲取條目或保存它們。
- Blazor 與此有什麼關係？
Blazor 應用實際上是一個 SPA。但與其他框架的主要區別在於，Blazor 允許您使用 C# 程式碼控制客戶端和伺服器端。為了展示這種優勢，讓我們看看其他 SPA 框架，例如 Angular：您可以使用 ASP.NET Core 建構 Angular SPA。在這種情況下，您使用 TypeScript 在 Angular 中編寫客戶端。如果您需要訪問數據，它將對 C# 的 ASP.NET Core 伺服器進行 API 呼叫。它與 React 等其他框架類似，但這裡使用的是 JavaScript 而不是 TypeScript。
這使得在這兩者之間共享程式碼變得很困難：如果您有文章模型，則需要在伺服器上用 C# 和客戶端上的 TypeScript 定義它。使用 Blazor，您只需在 C# 中定義一次並在兩個站點上重複使用它。換句話說：您只需編寫 C# 而無需關心 JavaScript*
*這就是 Blazor 背後的基本理念：在任何地方都使用 C#，而無需將 JavaScript 作為第二技術。但值得一提的是，您需要使用 Blazor 組件來完成此操作。如果您需要一些尚未移植到 Blazor 的庫，您仍然需要處理一些 JS。但是，仍然有諸如數據綁定之類的好處。在整個純 JS 堆棧上使用它會有些工作，因此我建議從提供 Blazor 組件的 UI 庫開始。
3.1 Blazor WebAssembly和Blazor 伺服器
現在您了解了基礎知識，您需要在兩種口味之間做出決定：
Blazor WebAssembly
顧名思義，它基本上是使用WebAssembly直接在瀏覽器中執行你的 C# 瀏覽器。它需要一個相對較新的瀏覽器，並且尚未在所有平台/瀏覽器上得到支持。此外，像 Chromium 或 Safari 這樣的主要引擎還不支持所有標準化功能。
假設您有一個帶有 C# 程式碼的按鈕作為處理程序，如下所示：
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
IncrementCount是一種 C# 方法。程式碼被傳輸到客戶端並在瀏覽器中執行。將其想像為瀏覽器內的 .NET Core 執行時，就像 Silverlight 但沒有任何外部外掛。甚至不需要在伺服器端安裝 ASP.NET Core！只要您不需要伺服器端的數據庫之類的東西，它就可以從任何網路伺服器提供服務。這使得應用程序更大（並且更慢，至少在第一次載入時）。範例 Visual Studio 模板的大小超過 17 兆字節！通過壓縮，這可以減少到 7 兆字節——對於一個 hello world 應用程序來說仍然很多。通過以發布模式發布應用程序，使用 gzip 時，這將下降到大約 7 MB 和 2.4 MB。至少後續請求更快。這些 DLL 文件儲存在瀏覽器記憶體中，從而避免了進一步的請求。但它可以離線使用（至少是沒有API呼叫的主要邏輯）。出於這個原因，它有時被稱為真正的 SPA——它可以與 Angular、React 和其他客戶端框架相媲美。由於 WebAssembly-Usage 的原因，這裡的調試可能會更加困難，目前它只支持基於 Chromium 的瀏覽器。
不知道 WebAssembly？這是一個相對較新的開放標準，它生成字節碼以改善載入和執行時間，從而實現更強大的 Web 應用程序——獨立於語言。您不必被迫使用 JavaScript 等特定語言：由於生成了字節碼，因此也可以使用其他語言，如 C++ 或 Rust。
簡而言之，WebAssembly 可以被視為功能豐富的 web 應用程序的下一代 JavaScript，其中 Blazor WebAssembly 是 C# 實現。由於瀏覽器執行時的原因，這裡有一些 API 不能使用。例如套接字或 I/O 訪問，如 File.Open 或 File.Write。
Blazor 伺服器
該應用程序在伺服器上執行，並使用 SignalR Websockets 將輸出（如點擊事件的結果，這會增加另一個 HTML 元素中的一些計數器）傳輸到瀏覽器。這使應用程序更小更快，但在伺服器端需要更多資源，因為您有一個 SignalR 連接，而且它在您的伺服器上也是虛擬 DOM - 使得在大型設置中更難擴展。
另一方面，這降低了對客戶端的要求：它們不需要支持 WASM，因此它可以在較舊的瀏覽器或限制 WASM 支持的瀏覽器以及低端設備上執行。但由於每個操作都以 SignalR 呼叫結束，因此應用程序將無法離線工作 - 如果這是必需的，請選擇 Blazor WebAssembly 而不是 Blazor Server。
選擇什麼？
如上所述，這取決於您的需求。例如，如果您需要離線支持，Blazor 伺服器就不是一個好的選擇。如果您不確定我是否更喜歡Blazor Server，並且只有在您計劃部署一個非常大的應用程序時才真正擔心這一點。
恕我直言，Blazor 伺服器目前更流暢、更靈活。Blazor Server 在 WebAssembly 之前也變得穩定。當 WebAssembly 進一步發展並得到更廣泛的支持時，此建議可能會在未來發生變化。
但在這種情況下，您可以稍後遷移！
Blazor WebAssembly 和 Server 都使用 Razor 組件。這意味著：您可以在兩者之間進行更改，而無需重新編寫整個程式碼。從 Blazor Server 遷移到 Blazor WebAssembly 時，僅對瀏覽器外部的數據呼叫之類的事情需要進行一些遷移工作。原因是，Blazor WASM 完全在瀏覽器中執行，因此您需要像 ASP.NET Core API 項目這樣的伺服器部分來處理它們。
更多資訊
我推薦官方文件中的ASP.NET Core Blazor簡介。另一章還描述了有關該平台的大量資訊並提供了教程。他們更深入地討論了數據綁定或事件處理等主題，僅舉幾例，並通過範例對其進行了說明。我試圖在這裡縮短它以進行基本概述。
