下載 Visual Studio 後首先建立一個 Blazor 方案，裡面建立 Blazor Server 專案，方案位置可以自己選擇（註：新版 Visual Studio 將 Blazor Server 跟 Blazor WebAssembly 的新增專案範本拆分了，較為直觀），先不管裡面的程式，按下 F5 執行後在網頁按下 F12 或是 Ctrl+Shift+I 開啟開發人員工具（Dev tool），切換到 Network 頁籤後重新載入網頁，可以看到幾個檔案，其中 blazor.server.js 就是在伺服器跟瀏覽器之間透過 SignalR 建立 WebSocket 通道的檔案。
接著清空下載到瀏覽器的檔案，再點擊 Counter 和 Fetch data 頁面，在以前的網站中這是重新整理網頁操作，會重新下載該網頁所需檔案，但是可以看到這兩頁都沒有下載東西（有 favicon.ico 下載，聰明的你知道什麼原因嗎？），因為第一次建立連線後，之後的檔案傳遞都是透過 SignalR。
接著在同一個方案建立一個 Blazor WebAssembly 專案，可以看到這裡有「漸進式 Web 應用程式」選項，如果選了，這個網站就可以在電腦下載下來。
專案建好後可以直接啟動專案，但如果想同時看到 Blazor Server 跟 Blazor WebAssembly 都啟動呢？可以將兩個專案都設定為啟動專案，接著按下 F5 啟動專案。
筆者幾個月前開發時還可以看到下載了許多 dll 檔案，但可以看到現在 Blazor WebAssembly 送到瀏覽器的檔案跟 Blazor Server 相差不大，因為微軟改變了 Blazor WebAssembly 下載 dll 的規則，改為只有 Component 發送要求時才會下載到瀏覽器，大大減輕瀏覽器的負擔。
接著來看專案結構，為求方便我將兩者對等的檔案用相同顏色框起來，並標上數字。先看 5 號，可以看到 Blazor Server 和 Blazor WebAssembly 有 Program.cs，兩者的程式進入點都是 Program.cs。
Blazor Server 的 Program.cs 檔案：
Blazor Wasm 的 Program.cs 檔案：
兩種專案都是透過 builder.Services 注入服務。在 .NET 6 預覽版或者之前的版本，是多了 Startup.cs 檔案，在 ConfigureServices 方法中「設定服務」（若有相關 Service 需要使用，就需要在這裡使用相依性（DI, Dependency Injection）注入，相依性注入的好處後續會說明。），兩者的作用是一樣的，.NET 6 看起來是不是清爽很多？
透過 var app = builder.Build(); 取得的 app 執行個體，和原來 Startup.cs 中的 Configure 方法作用也是類似的。用於處理 request 或是註冊 middleware 的地方，舉例來說，如果想使用別人寫的身分驗證套件，就必須在這裡註冊。定義路由也是在這裡做的，MapBlazorHub() 是建立 Server 跟瀏覽器間 SignalR 連線的方法，MapFallbackToPage("/_Host") 代表網頁入口是 _Host，Controller 跟 razor page 之外的 request（也就是第一次連線、或是連線出錯時）是從這裡進入，之後的 Component 觸發都是經由 6 號框的 App.razor 變動。
接著看 2 號框，可以看到 Blazor Server 多了 _Host.cshtml、_Layout.cshtml 及 Error.cshtml，_Host.cshtml 之前說過了，_Layout.cshtml（Blazor Server）和 index.html（Blazor Wasm）類似，是網站主頁面，Error.cshtml 則是連線出錯時會導向的頁面。其他 razor 檔名的檔案就是一個個元件（Component）。
3 號框則是兩個專案都相同，MainLayout.razor, NavMenu.razor 分別為網頁版面及選單，一個網站如果每個網頁都用相同 Sidebar、Menu，每更新一次（如更改公司 Logo、新增聯絡方式）就必須全部網頁都處理，未免太沒效率，於是 Blazor 將這些頁面抽出來，只需要改一個地方即可套用全部網頁。SurveyPrompt.razor 則是 Blazor 提供的簡單範例。_Imports.razor 則是將用到的 namespace 放在這裡，例如 @using System;，這樣一來每個 razor 頁面就不用各自引用 namespace 了，若想要區分不同 Component 的 namespace，也可以在不同資料夾建立獨立 _Imports.razor 檔案，不同資料夾的 _Imports.razor 只會作用於資料夾內的 Component。
最後是 1 號框的 wwwroot 資料夾，Blazor WebAssembly 多了一個 sample-data 目錄、icon-192.png 及 index.html，sample-data 目錄是下載到瀏覽器的天氣資料，icon-192.png 貌似沒地方用到？index.html 則是相當於 Blazor Server 中 _Host.cshtml 的檔案（上一段文字有提到）。
而 Blazor Server 中有個沒說到的 Data 資料夾，裡面又是什麼呢？其實就是 Server 傳到瀏覽器的天氣資料，WeatherForecastService 請各位記住這個字眼，後面的相依性注入就是靠它了。
最後是 Blazor Server 的 appsettings.json，這就是一份 JSON 格式的檔案，可以將需要經常修改的資料放在這裡，例如跟資料庫連線使用的連線字串，如果寫在程式裡面，每次一改都要將程式重新編譯，放在 appsettings.json 中靈活性就比較大。
- 引用: Lazy load assemblies in ASP.NET Core Blazor WebAssembly
- 引用: ASP NET Core blazor project structure
註：本文程式碼透過 .NET 6 + Visual Studio 2022 重構，可點選原文連結與重構後程式碼比較學習，謝謝閱讀，支持原作者