原文作者: Christian Findlay
原文鏈接：https://christianfindlay.com/2020/07/09/blazor-vs-traditional-web-apps/

Blazor是Microsoft團隊開發的單頁面應用程序（SPA）框架，它是與React，Angular和Vue.js有相同之處，但是它使用的是C＃而不是JavaScript。它將C＃帶入SPA領域，并向傳統的Web應用程序框架（如ASP .NET Web窗體和ASP .NET Core MVC）挑戰，來構建Web應用程序。本文討論了SPA和傳統Web應用程序之間的選擇，并說明了服務器端渲染和客戶端渲染之間的區別。

傳統Web應用程序

傳統的Web應用程序是很少或沒有客戶端處理的應用程序。HTML在服務器端渲染并傳遞到瀏覽器。它們主要圍繞靜態文本和填寫表單，并且大多數交互都需要刷新整頁。瀏覽器通過HTML表單將數據發送到服務器，然后服務器再進行處理。像 ASP 和 PHP 這樣的技術，在客戶端和服務器之間的進行數據傳輸并處理。這種方式允許 html代碼 和后端代碼寫在一起， 這樣的優勢是可以快速進行頁面開發，傳統的Web應用程序工作流通常向用戶提供一個表單，一個提交按鈕，并且在用戶單擊按鈕后會從服務器收到響應，這樣的用戶體驗通常不好。

ASP Web Forms是傳統Web應用程序技術的示例，但是它不支持設計現代Web API。Microsoft引入了.NET Core，它支持從現代Web API到傳統Web應用程序的所有內容，.NET Core的MVC風格是用于構建傳統Web應用程序的框架。

SPA 單頁面應用程序

SPA單頁應用程序是基于Web的應用程序，其中基于通過API調用與服務器之間進行數據傳輸來動態修改UI。SPA在客戶端呈現 HTML DOM。服務器通常在會話開始時傳輸所有HTML，JavaScript和CSS或WebAssembly代碼，并且不將其作為后續API調用的一部分進行傳輸。瀏覽器修改HTML DOM，而不是從服務器請求獲取完整的HTML內容。

Ajax是邁向SPA框架的第一步，這種方法在2000年代初開始流行。它使用JavaScript調用服務器端API，允許異步處理并局部刷新頁面。與傳統的Web應用程序相比，改善了用戶交互體驗，瀏覽器可以在屏幕上執行數據的部分更新，并且每次調用都沒有HTML傳輸，許多傳統的Web應用程序開始部分集成Ajax，開發人員在后端定義API接口，然后前端js負責api接口調用和處理。

Webpack等JavaScript模塊化的打包程序開始出現，它簡化了構建純JavaScript應用程序的過程，很方便對程序打包成原生的應用， 與Vue.js，Angular和React等框架結合使用時，SPA更方便構建和部署，并且前端和后端人員定義API后可以并行開發，提升效率。

什么是Blazor?

Blazor是一個SPA框架，它使用編譯的C＃來操縱HTML DOM來替代JavaScript，Blazor允許使用服務器端或客戶端托管模型，但是無論哪種情況，瀏覽器都可以操作HTML DOM客戶端，該應用程序仍然是SPA應用程序。

對于C＃程序員而言，非Blazor的SPA框架可能會有陡峭的學習曲線。Typescript與C＃有一些相似之處，但是編程范例卻大不相同。Blazor允許C＃開發人員使用Visual Studio進行構建和調試，而TypeScript主要將開發人員與VS Code聯系在一起。Visual Studio工具集通常是C＃開發人員更熟悉的。

C＃程序員幾乎無需學習就可以開始開發Blazor Web應用程序，如果C＃程序員已經使用ASP MVC，你會更得心應手，Blazor語法與ASP MVC語法非常相似，如果您的團隊擁有MVC的代碼庫，則向Blazor的過渡將會更加容易。

Blazor托管模型

區分Blazor托管模型和頁面渲染很重要,在客戶端模型中，Blazor在瀏覽器內部的WebAssembly（WASM）上運行，在服務器端模型中，Blazor在服務器上運行，并通過Signal-R將HTML傳輸到客戶端。兩種模型都可提供與React，Vue.js或Angular等SPA框架同樣的用戶體驗，但是有一些差異，服務器端模式不需要瀏覽器中的WASM支持，這意味著某些較舊的瀏覽器可以使用服務器端托管模型。

服務器模式的優點

?初始頁面下載可以小很多?可以利用已安裝的服務器端組件進行處理?Visual Studio完全支持使用服務器端模型進行調試

服務器模式的缺點

?沒有離線功能，斷開互聯網連接后，處理將停止。?延遲增加

客戶端模式的優點

?客戶端UI處理，可以減少對服務器的壓力?當用戶比較多時，服務器不用去管理很多的Socket連接?比Js 有更好的處理性能

客戶端模式的缺點

?WASM上的.NET目前還沒有發揮其全部性能潛力, 但是AOT編譯有望在不久的將來顯著提高性能。?互動僅限于瀏覽器的功能?初始化頁面比較慢，因為要下載 .NET 運行時。?調試客戶端Blazor應用程序會受到一些限制和問題。

總結

用戶通常期望現代的Web應用程序具有SPA的功能，傳統的Web應用程序可能適用于涉及傳統基礎架構或簡單頁面，但是，如果用戶在整個頁面重新加載時提供了不好的體驗，他們可能不太會喜歡使用這些程序，具有C＃經驗的開發團隊應在下一個Web應用程序中考慮Blazor,Blazor可能意味著不需要培訓人員使用JavaScript或TypeScript，并且提供了服務器和客戶端兩種模式，可以靈活使用。

最后

歡迎掃碼關注我們的公眾號 【全球技術精選】，專注國外優秀博客的翻譯和開源項目分享，也可以添加QQ群 897216102

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Blazor VS 传统Web应用程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。