Blazor Hosting Models

We can use Blazor to create web applications following two architectural patterns called hosting models:

• Blazor Server
• Blazor WebAssembly.

The two hosting models differ in where the applications run.

Blazor Server

The Blazor Server hosting model runs our application on the server within an ASP.NET Core application.

In this model, the application UI is rendered on the server and sent to the browser. UI updates and event handling are performed on the server, similar to traditional server-rendered web applications.

However, in this case, the communication between the UI and the server happens over a SignalR connection. SignalR provides some benefits over HTTP, such as real-time, two-directional, and lightweight interactions between the browser and the server. However, we don’t need to worry about SignalR. We usually won’t have to deal with this protocol directly. Blazor will handle all communication.

The following picture provides a high-level overview of the Blazor Server hosting model architecture:

Blazor WebAssembly

The Blazor WebAssembly hosting model is also known as Blazor WASM (WASM is a common abbreviation for WebAssembly).

This model runs the application entirely on the browser. It resembles a typical Single Page Application, but it doesn’t use JavaScript and HTML. The entire C# application code is compiled into WebAssembly, a binary instruction format for a virtual machine supported by modern browsers. This compilation process also includes the .NET runtime and any application dependency.

The result of this compilation is downloaded and executed locally by the user’s browser.

The following picture shows a high-level overview of the Blazor WebAssembly hosting model architecture:

Choose the right hosting model

Now that we know about these two hosting models for Blazor applications, we can decide which hosting model we should work with.

This choice depends on our hosting needs, our preference, the application’s nature, the target browsers, and so on.

To make the right decision, we need to learn about the advantages and disadvantages of each hosting model.

Advantages of using Blazor Server

• The client downloaded by the browser is significantly smaller than the Blazor WASM application.
• Our application is compatible with browsers that don’t support WebAssembly and even on limited-capability devices.
• Our application runs in the ASP.NET Core framework, so we can debug it with any preferred tool.

Disadvantages of using Blazor Server

• Every user interaction requires a roundtrip between the client and the server. This results in a higher latency than Blazor WebAssembly.
• We can’t use our application offline. If there is no connection, the application stops working.
• We need an ASP.NET Core server to serve our application. This effectively prevents serverless deployment scenarios.
• In high-traffic scenarios, scalability is challenging.

Advantages of using Blazor WebAssembly

• The application has no server-side dependency, so the full processing happens on the client.
• Since there is no server-side dependency, our application continues working when offline.
• No server-side dependency also means that we can serve our application from any web server, including serverless scenarios and Content Delivery Network (CDN) publication.

Disadvantages of using Blazor WebAssembly

• Only browsers supporting WebAssembly can run our application. Luckily, most recent browsers support it.
• The client needs to meet some hardware and software requirements to provide the needed processing power. Usually, this is associated with WebAssembly support.
• The initial application download takes longer than Blazor Server due to its size.