大家好，我是沙漠盡頭的狼。

Dotnet9網(wǎng)站回歸Blazor重構(gòu)，訪問速度確實飛快，同時用上Blazor的交互能力，站長也同步添加了幾個在線工具，這篇文章分享下Blazor的重構(gòu)過程，希望對大家網(wǎng)站開發(fā)時做技術(shù)選型有個參考。

1. 先聊聊Razor Pages

上個版本網(wǎng)站前臺使用的Razor Pages開發(fā)，當(dāng)時選擇這個技術(shù)棧主要是為了搜索引擎的SEO優(yōu)化考慮。

關(guān)于MVC和Razor Pages哪個更優(yōu)， 我們這里只說說Razor Pages相對的優(yōu)勢。

首先，Razor Pages相對于MVC來說，更加簡單和直觀。由于Razor Pages將視圖和處理邏輯封裝在同一個頁面中，開發(fā)人員可以更容易地理解和維護(hù)代碼。對于小型項目或者只有少量頁面的應(yīng)用來說，Razor Pages可以提供更快的開發(fā)速度和更簡潔的代碼結(jié)構(gòu)，這是站長當(dāng)時從MVC重構(gòu)成Razor Pages的主要選擇理由。

其次，Razor Pages在SEO（搜索引擎優(yōu)化）方面具有一定的優(yōu)勢。由于Razor Pages將視圖和處理邏輯封裝在同一個頁面中，搜索引擎可以更容易地理解和索引頁面的內(nèi)容。這對于需要更好的搜索引擎排名的應(yīng)用來說，是一個重要的考慮因素。

說Razor Pages優(yōu)勢，那為啥現(xiàn)在又換Blazor了？因為Blazor可能又是更好的選擇了，我們接著說。

2. 關(guān)鍵聊聊Blazor

Blazor是一個新興的Web開發(fā)框架，它可以讓開發(fā)人員使用C#語言來編寫Web應(yīng)用程序，而不必使用JavaScript，當(dāng)然只能說盡量少用，完全不用也不太現(xiàn)實。相比于Razor Pages和MVC，Blazor提供了一種全新的開發(fā)模式，具有許多獨特的優(yōu)勢和適用場景。

首先，Blazor提供了真正的前端開發(fā)體驗。傳統(tǒng)的Web開發(fā)中，前端開發(fā)人員需要使用JavaScript來處理頁面的交互和動態(tài)效果，而后端開發(fā)人員則負(fù)責(zé)處理業(yè)務(wù)邏輯和數(shù)據(jù)操作。這種分離的開發(fā)模式可能導(dǎo)致開發(fā)人員之間的溝通和協(xié)作問題。而Blazor使用C#語言來編寫前端代碼，使得前端和后端開發(fā)人員可以使用相同的語言和工具，更加高效地協(xié)作開發(fā)。

其次，Blazor提供了更好的性能和用戶體驗，Blazor提供了客戶端和服務(wù)端兩種模式（Blazor混合模式有機(jī)會我們再談）：

• 客戶端模式：Blazor使用WebAssembly技術(shù)，在瀏覽器中直接運行編譯后的二進(jìn)制代碼，可以實現(xiàn)接近原生應(yīng)用的性能。

• 服務(wù)端模式：與傳統(tǒng)的基于HTTP請求的頁面刷新相比，Blazor使用SignalR連接來實現(xiàn)實時數(shù)據(jù)更新和雙向綁定，可以提供更快速和流暢的用戶體驗。

另外，Blazor還具有更好的可重用性和組件化開發(fā)。Blazor提供了豐富的組件庫和工具，可以幫助開發(fā)人員更快地構(gòu)建出漂亮且功能強大的界面。開發(fā)人員可以將常用的UI組件封裝成可重用的組件，提高開發(fā)效率和代碼質(zhì)量。

此外，Blazor還支持現(xiàn)代化的前端開發(fā)技術(shù)和工具。開發(fā)人員可以使用Blazor與現(xiàn)有的JavaScript庫和框架進(jìn)行集成，如React、Vue.js等。

總之，Blazor對于Razor Pages和MVC來說是一個更好的選擇，特別是對于需要更好的前端開發(fā)體驗、更好的性能和用戶體驗以及更好的可重用性和組件化開發(fā)的項目來說。然而，選擇使用哪種開發(fā)模式還是要根據(jù)項目的具體需求和開發(fā)團(tuán)隊的偏好來決定。無論選擇哪種模式，重要的是根據(jù)項目的實際情況做出合理的選擇，并且在開發(fā)過程中遵循良好的設(shè)計原則和最佳實踐。

3. 再聊聊為啥又用Blazor了？

站長在去年對網(wǎng)站前臺使用Blazor Server開發(fā)過一個版本，當(dāng)時因為斷線重連體驗的問題，站長選擇用Razor Pages重構(gòu)了。

這次站長回歸Blazor的轉(zhuǎn)折點在6月13號 - .NET 8 Preview 5發(fā)布，VS2022預(yù)覽版也跟著出了Blazor Web App項目模板，各個技術(shù)群也討論瘋了，站長在Razor Pages中添加了Razor 組件嘗試，微軟確實牛逼，旨在使 Blazor 組件能夠滿足客戶端和服務(wù)器端的所有 Web UI 需求。。

但目前該模式Razor組件無法交互，頁面還出現(xiàn)了重連置灰UI，索性直接用Blazor Server重構(gòu)，經(jīng)過幾天的奮戰(zhàn)，網(wǎng)站前臺已經(jīng)用Blazor Server完全替換Razor Pages，煩人的重連也解決了，現(xiàn)在訪問網(wǎng)站飛快，不知道是不是錯覺，個人感覺很好。（重連問題參考微軟文檔【ASP.NET Core BlazorSignalR 指南】和Token佬寫的文章 【如何取消Blazor Server煩人的重新連接？】。）

Razor Pages（MVC）與Blazor都使用的Razor語法，所以理論上切換是無縫的，核心代碼改動不大，項目代碼文件結(jié)構(gòu)對比看下面截圖，不再贅述，有興趣看源碼吧，兩個版本代碼都在。

Razor Pages版工程結(jié)構(gòu)Blazor Server版工程結(jié)構(gòu)

4. Blazor的交互便利：帶來幾個在線工具

對于頁面的事件處理，使用Blazor就方便了，下面是昨晚加的4個小工具：

有興趣的朋友可以點擊體驗：https://dotnet9.com/tools，?我們直接貼上4個小工具代碼，你可能會喜歡上Blazor的代碼風(fēng)格。

4.1. JSON格式化

訪問地址：https://dotnet9.com/tools/jsonformatter

頁面代碼：

4.2. 在線字符串編碼工具

訪問地址：https://dotnet9.com/tools/string-encoder

頁面代碼：

4.3. 倒計時

訪問地址：https://dotnet9.com/tools/countdown

頁面代碼：

4.4. 時間戳轉(zhuǎn)換

訪問地址：https://dotnet9.com/tools/timestamp

站長原來寫過一篇，可以看這里：使用Blazor做個簡單的時間戳在線轉(zhuǎn)換工具。

5. 總結(jié)

網(wǎng)站可能存在Bug，不，一定存在Bug，站長會一直重構(gòu)迭代下去。

很高興將網(wǎng)站前臺重構(gòu)后分享這個喜悅給大家，祝大家端午安康。

• 網(wǎng)站地址：https://dotnet9.com/

• 網(wǎng)站源碼：https://github.com/dotnet9/Dotnet9

• .NET版本：?.NET 8.0.0-preview.5.23280.8

時間如流水，只能流去不流回。