Day 03 Blazor Server和Blazor WebAssembly的差异

下载Visual Studio後首先建立一个BlazorPratice方案，里面建立Blazor Server专案，方案位置可以自己选择(注：新版Visual Studio将Blazor Server跟Blazor WebAssembly的建立专案介面拆分，较为直觉)，先不管里面的程序码，案下F5执行後在网页按下F12或是Ctrl+Shift+I开启开发人员工具(Dev tool)，切换到Network页签後重整网页，可以看到几个档案，其中blazor.server.js就是在服务器跟浏览器之间透过SingalR建立WebSocket通道的档案。

接着清空下载到浏览器的档案，再点击Counter和Fetch data页面，在过去的网站中这是换页行为，会重新下载该网页所需档案，但是可以看到这两页都没有下载东西，因为第一次建立连结後，之後的资料传递都是通过SingalR。

接着在同个方案建立一个Blazor WebAssembly专案，可以看到这里有Progressive Web Application选项，如果选了，这个网站就可以在电脑下载下来。

专案建好後可以直接启动专案，但如果想同时看到Blazor Server跟Blazor WebAssembly都启动呢？可以将两个专案都设定为启动专案，接着按下F5启动专案。

笔者几个月前开发时还可以看到下载了许多dll档案，但可以看到现在Blazor WebAssembly送到浏览器的档案跟Blazor Server相差不大，因为微软改变了Blazor WebAssembly下载dll的规则，改为只有Component发送要求时才会下载到浏览器，大大减轻浏览器的负担。

接着来看专案结构，为求方便我将两者对等的档案用相同颜色框起来。先看黄框，可以看到Blazor Server和Blazor WebAssembly分别有Program.cs, Startup.cs以及Program.cs，两者的程序进入点都是Program.cs，不同之处在於Blazor Server会再呼叫UseStartup方法。Blazor WebAssembly则是直接在Program.cs呼叫Service。

接着看Startup.cs，可以看到两个方法ConfigureServices及Configure，前者从名字可以看出来就是「设定服务」的意思，若有相关Service需要使用，就需要在这里使用依赖注入(DI, Dependency Injection)注册，依赖注入的好处後续会说明。

Configure则是处理request或是注册middleware的地方，举例来说，如果想使用别人写的身分验证套件，就必须在这里注册。定义路由也是在这里做的，MapBlazorHub()是建立Server跟浏览器间SingalR连线的方法，MapFallbackToPage("/_Host")代表网页入口是_Host，Controller跟razor page之外的request(也就是第一次连线、或是连线出错时)是从这里进入，之後的Component触发都是经由粉红框的App.razor更动。

接着看深蓝框，可以看到Blazor Server多了_Host.cshtml及Error.cshtml，前者之前说过了，後者则是连线出错时会导向的页面。其他razor附档名的档案就是一个个Component。

浅蓝框则是两个专案都相同，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。

最後是红框的wwwroot资料夹，Blazor WebAssembly多了一个weather.json及index.html，前者是此下载到浏览器的天气资料，後者则是相当於Blazor Server中_Host.cshtml的档案。

而Blazor Server中有个没说到的Data资料夹，里面又是什麽呢？其实就是Server传到浏览器的天气资料，WeatherForecastService请各位记住这个字眼，後面的依赖注入就是靠它了。

最後是Blazor Server的appsettings.json，这就是一份JSON格式的文件，可以将需要时常异动的资料放在这里，例如跟资料库沟通的连线字串，如果写在程序里面，每次一改都要将程序重新编译，放在appsettings.json的灵活性就比较大。
Ref: Lazy load assemblies in ASP.NET Core Blazor WebAssembly
Ref: ASP NET Core blazor project structure