Popular blog tags

Choose Wisely between Blazor WebAssembly Hosted deployment & Blazor WebAssembly Standalone deployment & Blazor Server



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


    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 ServerBlazor WebAssembly
Access to server resourceDirectlyIndirect
Built-in SignalR CoreYesNo
Built-in service worker?NoYes
Validation and processAt serverAt client
Ready for production?YesYes
Client-Server communicationBy WebAssemblyBy JSON, WebAssembly


Blazor WebAssemblyBlazor Server
  • Hosts components in the browser using a WebAssembly based .NET Runtime
  • Handles UI updates on the client-side completely
  • Uses open web standard for WebAssembly to run the code - no plugins or transpilation required
  • Can use programming language of choice on server
  • Best for high fidelity, instant update applications like games or drawing apps
  • Requires modern browsers (of which all support WebAssembly) to run
  • Still in preview and under active development
  • Hosts UI components on the server
  • Allows you to take full advantage of .NET Core on the server
  • Uses SignalR to push UI updates for specific components
  • Has the full performance and security that comes with .NET Core
  • Can continue to use familiar ASP.NET Core technologies on the server, side by side
  • Works best when you know the client can maintain a connection to the server
  • Ideal for use on low powered client devices, since components do most of their work on the server
  • Generally available with the release of .NET Core 3.0




Blazor WebAssembly

step 1: install the latest .NET  SDK


step 2:install the latest Blazor WebAssembly template:

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4

step 3:installing the latest preview of Visual Studio 2019