Table of Contents
Started in 2018, Blazor is developed by Microsoft as an SPA (single page application) framework. Most existing SPA frameworks like Angular, Vue, React built with TypeScript/JavaScript language. Blazor in the contrast, use C# to build the website then the code will be compiled to WebAssembly and run directly on the browser. Blazor also optimize the communication between browser and server by using WebAssembly instead of traditional JSON.
Blazor WebAssembly 是真正的SPA，页面的渲染在前端实现，可以实现真正的前后端分离设计。而Blazor.Server可以认为是前者的服务端渲染版本，它使用SignalR实现了客户端的实时通讯，它的计算跟渲染都在服务端处理。
Blazor WebAssembly is the name of that client-side component of Blazor.
The publish output of a Blazor WASM project are all static files.
The initial release of Blazor includes several hosting models like: Blazor Server, Blazor WebAssembly, Blazor PWAs, Blazor Native, Blazor Hybrid and created quite confusion for the community because there are so many versions of Blazor and one can't decide what to use. Realizing that confusion, Microsoft simplify Blazor into 2 hosting models:
Blazor Server and Blazor WebAssembly.
three choices
1.Server-side model
Server-side Blazor runs on the server via SignalR
2.Client-side model
Client-side Blazor runs client-side on WebAssembly
You have two choices, you have to choose one of them。
2.1.Blazor WebAssembly Hosted deployment
A hosted deployment serves the Blazor WebAssembly app to browsers from an ASP.NET Core app that runs on a web server.
After you create your project, you are going to have a solution with three projects:
drwxr-xr-x 8 root root 4096 Feb 6 00:55 Client
drwxr-xr-x 7 root root 4096 Feb 6 00:56 Server
drwxr-xr-x 4 root root 4096 Feb 6 00:56 Shared
VonageSmsDashboard.Client
VonageSmsDashboard.Server
VonageSmsDashboard.Shared
2.2.Blazor WebAssembly Standalone deployment
A standalone deployment serves the Blazor WebAssembly app as a set of static files that are requested directly by clients. Any static file server is able to serve the Blazor app.
project structure-one project
-rw-r--r-- 1 root root 357 Jun 27 2020 App.razor
drwxr-xr-x 4 root root 4096 Jun 27 2020 bin
-rw-r--r-- 1 root root 645 Jun 27 2020 BlazorWebAssemblyStandaloneeployment.csproj
drwxr-xr-x 2 root root 4096 Jun 27 2020 Helpers
-rw-r--r-- 1 root root 376 Jun 27 2020 _Imports.razor
-rw-r--r-- 1 root root 681 Jun 27 2020 InstallReadMe.txt
drwxr-xr-x 4 root root 4096 Jun 27 2020 obj
drwxr-xr-x 2 root root 4096 Jun 27 2020 Pages
-rw-r--r-- 1 root root 790 Jun 27 2020 Program.cs
drwxr-xr-x 2 root root 4096 Jun 27 2020 Properties
drwxr-xr-x 2 root root 4096 Jun 27 2020 Shared
drwxr-xr-x 4 root root 4096 Jun 27 2020 wwwroot
3.Blazor Hybrid
Blazor can also be used to build native client apps using a hybrid approach. Hybrid apps are native apps that leverage web technologies for their functionality. In a Blazor Hybrid app, Razor components run directly in the native app (not on WebAssembly) along with any other .NET code and render web UI based on HTML and CSS to an embedded web view control through a local interop channel.
Hosting models in comparison
| Blazor Server | Blazor WebAssembly | |
| Access to server resource | Directly | Indirect |
| Built-in SignalR Core | Yes | No |
| Built-in service worker? | No | Yes |
| Validation and process | At server | At client |
| Ready for production? | Yes | Yes |
| Client-Server communication | By WebAssembly | By JSON, WebAssembly |
| Blazor WebAssembly | Blazor Server |
|
|
Blazor WebAssembly
step 1: install the latest .NET SDK
https://dotnet.microsoft.com/download/dotnet/5.0
step 2:install the latest Blazor WebAssembly template:
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4step 3:installing the latest preview of Visual Studio 2019
https://visualstudio.microsoft.com/en/vs/preview