Blazor Server vs Blazor WebAssembly vs Blazor Web App!

Table of Contents

• What are Hosting Models
• Blazor Server
• Blazor WebAssembly
• Blazor Web App
• Which hosting model should you choose?

So, you have heard about the modern frontend web development framework — Blazor and are excited to start building applications using the same. The first step you’ll do is open up Visual Studio, Create a new project, and search for templates that match Blazor. When you search Blazor, you will see almost five to six templates popup with different names and you will get all confused.

This screenshot is taken from Visual Studio 2022

The different Blazor templates above can be divided into three categories:

1. Blazor Server
2. Blazor WebAssembly
3. Blazor Web App

All these are the hosting models for Blazor which will allow us to control how our application functions. Let’s see in detail about each of the hosting models.

1. Blazor Server:

In Blazor Server, as the name suggests, the app logic runs on the server. The Blazor Server uses a SignalR Connection to serve the UI Updates to the user on their browser from the server. Here, when the user tries to access your web application, the user will get the UI of your application whereas the backend logic stays on the server and is fetched as and when requested. Here, by use of SignalR, real-time updates could be seen between the client and the user, which helps to keep the UI in sync with the server state. Here, as the code runs on the server, we have full access to the .NET APIs, as well as server-side resources like Database, File System, etc.

How does Blazor Server Work?

Suppose you access a web application that is developed in Blazor Web Server. Let’s see what process will take place when you first visit this website.

• When you initially navigate to a Blazor Web Server application, the server will send an initial HTML page that will include a small Javascript code to establish the SignalR connection. Typically, the name of the javascript will be blazor.server.js
• This SignalR helps to establish a real-time communication channel between client and server.
• User interaction such as button clicks or form submissions are sent to the server over SignalR connection.
• The server then processes these events using application logic and sends the UI updates back to the client over SignalR connection, and the browser updates the DOM accordingly.

Benefits of Blazor Server

• As only a small amount of data is required, load time is fast.
• This is more secure as application logic is not exposed to the client.
• All the .NET ecosystems can be leveraged, including server-side APIs and libraries.

Drawbacks of Blazor Server

• Network Latency can happen if the server is slow.
• As the server needs to handle multiple SignalR connections, high-traffic applications can face issues.
• The application cannot function if not connected to the server.

2. Blazor WebAssembly:

The Blazor WebAssembly runs entirely in the browser and uses WebAssembly (aka Wasm) to execute .NET Code. Wasm enables us to deploy on the web for client and server applications. Blazor WebAssembly uses Ahead of Time (AOT) Compilation, where we can compile our .NET Code directly into WebAssembly. Without using AOT, Blazor WebAssembly can run on the browser using .NET Intermediate Language interpreter implemented in WebAssembly with partial just-in-time (JIT) compilation support.

How does Blazor WebAssembly Work?

• When you navigate to a WebAssembly app, the server sends the static files, including WebAssembly runtime, .NET assemblies and any other assets required for the application.
• WebAssembly runtime in the browser loads and executes the .NET assemblies.
• Blazor framework handles rendering the UI and managing the user interactions.
• The Client side Blazor app can communicate with server side APIs using standard HTTP calls.

Benefits of Blazor WebAssembly

• Provides offline support after initial load as the application runs on the client side.
• Leverages the powerful .NET ecosystem, enabling code reuse and unified development experience.
• Works on any browser that supports WebAssembly without requiring a plugin.

Drawbacks of Blazor WebAssembly

• The initial Download time is quite large as all the .NET assemblies and runtime needs to be downloaded into the browser.
• Server-side APIs are not directly accessible, so restricted to the APIs available in WebAssembly and browser.

3. Blazor Web App:

The Blazor Web App offers a hybrid approach by supporting both server-side and client interactivity. It combines the benefits of both Blazor WebAssembly as well as Blazor Server. This allows us to build applications that can render both on the client side using WebAssembly and on the server side, depending on the scenario. It can offer better performance, scalability, and flexibility by leveraging the strengths of both approaches.

How does Blazor Web App Work?

• Suppose you navigate to the application URL that uses the Blazor Web App Hosting Model.
• The initial pre-rendered page is served by the server and is visible to the user while the browser downloads the Blazor WebAssembly runtime in the background.
• WebAssembly rendering initializes and takes over the rendering, transitioning the application to client-side execution.
• Client handles the subsequent API calls, and UI updates, so that the need for server communication could be reduced.

Benefits of Blazor Web App

• Fast initial load as the initial load is pre-rendered by the server.
• Server-side pre-rendering ensures search engines can index application content, which helps with SEO.
• Once the WebAssembly is initialized, the application can run handle interaction in the browser which reduces server interaction and increases responsiveness.
• The server is not required to process every interaction which frees up the server resources for other tasks.

Drawbacks of Blazor Web App

• The complexity increases as we have to manage both server-side and client-side effectively.
• The download size is large as the .NET runtime and assemblies are downloaded in the browser.
• Security needs to be handled for both client-side and server-side applications.

Which Hosting Model should you choose?

Choosing between Blazor Server, Blazor WebAssembly and Blazor Web App depends on various factors like your application requirements, end-user needs, and your development resources. Some of the criteria that can help you in making this decision are:

1. Blazor Server —

• Blazor Server is best for Applications which has heavy server-side logic.
• It can be used in scenarios where SEO and initial load time are critical.
• It can used in scenarios where we are going to have consistent network connectivity (like internal enterprise applications).

2. Blazor WebAssembly —

• Blazor WebAssembly projects are best for customer-facing applications where we focus on user experience and responsiveness.
• It can be used in applications requiring offline connectivity.

3. Blazor Web App —

• Can be used in applications that require a balance of performance, scalability, and user experience.
• It can be used in scenarios where SEO and initial load time are critical, but responsiveness and offline support are also needed.

With keeping these matrix in mind, you can make a decision related to which hosting model would be best suited for your requirements.