下載 visual studio 後首先建立一個 blazor 解決方案，裡面建立 blazor server 項目，方案位置可以自己選擇(註：新版 visual studio 將 blazor server 跟 blazor webassembly 的新建項目模板拆分了，較為直觀)，先不管裡面的程式，按下 f5 執行後在網頁按下 f12 或是 ctrl+shift+i 開啟開發人員工具(dev tool)，切換到 network 頁簽後重新加載網頁，可以看到幾個文件，其中 blazor.server.js 就是在伺服器跟瀏覽器之間通過 singalr 建立 websocket 通道的文件。
接著清空下載到瀏覽器的文件，再點擊 counter 和 fetch data 頁面，在以前的網站中這是刷新網頁操作，會重新下載該網頁所需文件，但是可以看到這兩頁都沒有下載東西(有 favicon.ico 下載，聰明的你知道什麼原因嗎？)，因為第一次建立連接後，之後的文件傳遞都是通過 singalr。
接着在同一个解决方案建立一个 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 跟浏览器间 SingalR 连接的方法，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 重構，可點擊原文連結與重構後代碼比較學習，謝謝閱讀，支持原作者