Blazor(2)-簡介

前面有說到，眾多的前端框架對於一個經驗不多的web開發者來說，是有非常多課題需要克服的。 不論是巨大的時間成本或是太過多樣複雜的技術要學習，可以說要逐一嘗試每一種框架技術是近乎不可能的。

那麼，使用Blazor就能夠解決上述問題嗎？首先我們先來看看Blazor優點： ref

• 使用C#：不論前端後端，都以C#撰寫程式碼，讓.net工程師可以無痛學習開發。
• 使用Visual Studio：.net工程師可以直接使用已經習慣的VS強大工具及擴充套件。
• .net生態：利用.net程式庫的現有.net生態系統。
• 自由開發：不受限於框架的design pattern，可自由設計開發。
• 共用程式碼，以C#.net撰寫的前後端應用程式邏輯可直接共用，不需再同步修改兩份以上的程式碼。

總結來說，使用Blazor的最大好處是可以更輕鬆的學習前後端框架，不須學習額外的其他前端語言及框架。 並且依靠原本.net系列的生態系，不論是專案升級或是新人學習都能夠減少非常大量的學習成本。

現今最流行的前端三大框架：Vue、React及Angular主要都是Client端程式為主， 而過去.net系列框架：web form、 asp.net MVC、RazorPages都是以Server端程式為主。 為什麼以前稱霸的Server side Web APP會被Client side給取代呢？這邊簡單解釋一下兩者的差異。

SSR(Server-Side Rendering)

SSR(伺服器端渲染)，意思是Server收到請求後，會一次在Server端將需處理的資料處理完畢後， 直接生成完整的Html程式碼後回傳至給瀏覽器進行畫面呈現。

圖：SSR渲染時間軸， 圖片來源

在Borwser發出請求至Server後，Server會先處理請求資料，處理完畢後將資料及畫面一併渲染，並回傳至Borwser進行呈現，此時來到FCP(First Contentful Paint)點。 畫面呈現之後，會接著下載並執行頁面所需的Js，完成後就來到了TTI(Time to Interactive)點，供使用者進行互動。

CSR(Client-Side Rendering)

CSR(客戶端渲染)，意思是畫面渲染都由Borwser來進行。不論是顯示邏輯、Route、畫面跳轉等都由客戶端處理。 現今流行的SPA就是CSR，所有動作皆是Borwser來處理，利用Js來替換內容及跳轉頁面。

圖：CSR渲染時間軸， 圖片來源

在Bowser發出請求後，會直接將Html下載下來並呈現，此時來到FCP(First Contentful Paint)點。CSR的頁面大多都是由JS渲染出來的，因此這個階段通常會是空白或是簡單的Loading畫面。 畫面呈現完之後會開始下載、解譯並執行JS同捆包，執行後才開始渲染畫面，完成就到了TTI(Time to Interactive)點。供使用者進行互動。

SSR＆CSR差異

• SSR初次執行速度優於CSR：SSR初次渲染畫面較快，CSR因要下載並解析較大量的JS包因此首次執行較慢
• CSR使用者體驗優於SSR：SSR每次互動都需要由Server端重新渲染畫面。而CSR的所有互動都由JS執行並渲染，只需從Server端取得資料就好
• CSR的Server負載優於SSR：SSR需不斷請求Server渲染畫面。而CSR的Server只需提供所需資料就好

這邊簡單介紹Blazor及兩種Hosting Model的渲染方式，後續講解Hosting Models時會在詳細說明Blazor Server及Blazor WebAssemble。