Blazor Server was release with .net core 3.0 in September 2019 and Blazor WebAssembly (WASM) was released in May 2020. Today, I will talk about the differences, when to use what version, and everything else you need to know about Blazor Server vs. Blazor WebAssembly.

Blazor currently has two hosting models, server-side Blazor and Web Assembly. Server-side hosting was released in September 2019, and Web Assembly was officially released in May, 2020.

Blazor Server vs. Blazor WebAssembly Features

Before, I go into the details of each version of Blazor, let’s have a look at their features.

WebAssembly Hosting Model

  • WASM runs in the browser on the client.
  • The first request to the WASM application downloads the CLR, Assemblies, JavaScript, CSS (React and Angular work similar).
  • It runs in the secure WASM sandbox.
  • The Blazor Javascript handler accesses the DOM (Document Object Model).

Server Hosting Model

  • The C# code runs on the server.
  • Javascript hooks are used to access the DOM.
  • Binary messages are used to pass information between the browser and the server using SignalR.
  • If something is changed the server sends back DOM update messages.

SignalR

SignalR is an integral part of Blazor and offers these features:

  • It is free, open-source and a first-class citizen of .net core
  • Sends async messages over persistent connections.
  • Connections are two-way.
  • Every client has its own connection.
  • Azure SignalR Services offers a free tier.
  • Example applications are chat applications or the car tracking in the Uber app.

Blazor Server vs. Blazor WebAssembly Project Templates

To create both versions of Blazor you should have an up to date version of Visual Studio 2019. Blazor WASM was added in May 2020, whereas Blazor Server was included in the launch of VS 2019.

Pros and Cons Blazor Server

Advantages

  • Faster loading than WASM
  • Access to secure resources like databases or cloud-based services
  • Supports browsers which don’t support WASM like IE 11
  • C# code is not sent to the browser

Disadvantages

  • Extra latency due to sending data back and forth
  • No offline support
  • Scalability can be challenging
  • Server required (serverless possible)

Pros and Cons Blazor WebAssembly

Advantages

  • Faster UI Code
  • When performance matters use WASM
  • Offline support
  • Can be distributed via CDN, no server required (except for API)
  • Any .Net standard 2.0 C# can be run

Disadvantages

  • An API layer is required if you want to access secure resources
  • Debugging still a bit limited

Web Assembly runs on the client, inside the browser, so it can be deployed as static files. Despite this, Blazor Wasm apps will not run directly from the local file system due to browser security restrictions.

Blazor Wasm is that it can work off-line. When the network connection to the server is lost, the client app can continue to function (obviously it won’t be able to talk to the server to retrieve new data).

It can also quite easily run as a Progressive Web App, which means the client can choose to install our app onto their device and run it whenever they wish without any network access at all.

With code running on the client’s machine it means the server load is significantly reduced.

Blazor WebAssembly App (ASP.NET Core hosted)

After selecting the Blazor WebAssembly App template, you have the option of configuring the app to use an ASP.NET Core backend by selecting the ASP.NET Core hosted check box (dotnet new blazorwasm --hosted). The ASP.NET Core app serves the Blazor app to clients. An app with an ASP.NET Core backend is called a hosted Blazor WebAssembly app. The Blazor WebAssembly app can interact with the server over the network using web API calls or SignalR (Use ASP.NET Core SignalR with Blazor WebAssembly).

The Blazor WebAssembly hosting model offers several benefits:

  • There’s no .NET server-side dependency. The app is fully functioning after it’s downloaded to the client.
  • Client resources and capabilities are fully leveraged.
  • Work is offloaded from the server to the client.
  • An ASP.NET Core web server isn’t required to host the app. Serverless deployment scenarios are possible (for example, serving the app from a CDN).

There are downsides to Blazor WebAssembly hosting:

  • The app is restricted to the capabilities of the browser.
  • Capable client hardware and software (for example, WebAssembly support) is required.
  • Download size is larger, and apps take longer to load.
  • .NET runtime and tooling support is less mature. For example, limitations exist in .NET Standard support and debugging.

Conclusion

Blazor Server and WebAssembly application both have their advantages and disadvantages. If you want to serve a large number of users and don’t have secret code running, use WASM. It also offers offline support. Use Blazor Server if performance is important or if you have sensitive code that you don’t want to send to the browser.

Sources:

https://www.programmingwithwolfgang.com/blazor-server-vs-blazor-webassembly/

https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-5.0

Blazor hosting models
Last modified: November 20, 2020

Author

Comments

Write a Reply or Comment