ASP.NET Core Blazor Hosting Models (Blazor WebAssembly and Blazor Server). The Complete ASP.NET Core Blazor Developer Course 2023 [Videos].

In this article, I am going to discuss ASP.NET Core Blazor Hosting Models (Blazor WebAssembly and Blazor Server Hosting). Please read our previous article, where we discussed the step-by-step process to develop the Blazor app using visual studio 2019. As we already discussed in our previous article that Blazor has two hosting models. They are as follows:

1. Client-side hosting model
2. Server-side hosting model

The Blazor Server App template is used to create a Blazor application with the server-side hosting model. On the other hand, the Blazor WebAssembly App template creates a Blazor application with the client-side hosting model. At the end of this Video, you will understand the following pointers in detail.

1. Understand Client-side hosting model (Blazor WebAssembly App)
2. Understand Server-side hosting model (Blazor Server App)
3. Difference between these two hosting models.
4. Advantages and disadvantages of each hosting models

Blazor WebAssembly Hosting Model:

As we said, with Blazor, the .NET applications can run on a web browser. This applies to applications that use the client-side hosting model and these applications are called Blazor web Assembly Applications. So, in simple words, we can say that we can use Blazor WebAssembly to execute .NET Applications in a web browser.

In Blazor WebAssembly Hosting Model, the application directly runs in the browser with the help of WebAssembly. So, the things which are required to run a .Net application such as the compiled application code, its dependencies, and the most important .NET runtime are downloaded to the client browser by WebAssembly from the server as shown in the below image.

In the Client-Side Blazor project (Blazor WebAssembly application), we have two options.

1. Blazor (client-side): In this case, the Blazor WebAssembly application can run entirely on the client browser without making a connection to the server. Here, only static files are used. If you create in this way, you only get a front-end project and in this project, you can have C# code that will be executed on the browser. 
2. Blazor (Client-side + ASP.NET Core): Here in addition to giving a front-end project, we are also giving Web APIs which will interact with our front-end. This configuration is ideal when you going to have a front-end and back-end. In this model, we can share the code between the front-end and the back-end.

In this course, we are going to focus on the Blazor model hosted in ASP.NET Core. This helps us to develop a complete application that goes from a front-end to a back-end to interact with a database.

Is all the code goes to the web browser for execution?

One question that definitely comes to your mind is, is all the code goes to the web browser for execution? The answer is No. If you are using an ASP.NET Core hosted Blazor web assembly application, then only the code in the front-end project is going to go to the usage of web browser, not the code of the ASP.NET core project go the web browser. This is important because, in the ASP.NET Core Project, you can have a connection string and any other sensitive information that you dont want the user to have access to it.

Note: As we said in a Blazor web assembly application, we download the .NET Runtime to the browser and then execute the C# code from there using web assembly. This is something that happened dramatically which Blazor takes care of. This is completely transparent to us. We just have to limit ourselves to programming as we have always done and Blazor will do the rest.

Advantages of Blazor WebAssembly Hosting Model:

1. As we already discussed a Blazor WebAssembly application can run entirely on the client browser. Once the application is downloaded, then a connection to the server is not required. That means if the network connection to the server is lost, then also the client app can continue to function. So, there is no need for the server to up and running 24X7.
2. We do not require a full-blown ASP.NET Core webserver to host our application. We just need a server somewhere, that can deliver the application to the client browser. That means you can host the application on your own server on the internet somewhere, in the cloud, on Azure as a static website, or even on a CDN (Content Delivery Network).
3. With code running on the clients machine it means the server load is significantly reduced.
4. The client-side model has the advantage is that it is highly scalable. That means it is possible to serve many users simultaneously.

Disadvantages of Blazor WebAssembly Hosting Model:

1. The blazor.webassembly.js file bootstraps the client application. That means it will download all the required .NET DLL assemblies, their dependencies, .NET Runtime which makes the first request take a longer time. If the same client visits the application again, it usually loads the page fast because the browser caches the files.
2. As the application runs entirely on the client browser, it is restricted to the capabilities of the browser.
3. Depending on the nature of the application, capable client hardware and software are required. From a software standpoint, for example, at least a browser with WebAssembly support is required.

Blazor Server-Side Hosting Model:

With Blazor Server Hosting Model, the Blazor applications run on the server and the user interacts with the server through a SignalR connection. With SignalR we handle real-time communication that means with SignalR the client does not need to download the .NET Runtime, simply interact with the application remotely. As we dont download the .NET Runtime in Blazor Server App to run the application, which makes the application serves on the server-side load faster for the user.

When an event occurs on the client such as a button click, the information about the event is sent to the server over the SignalR connection. The server handles the event and for the generated HTML a difference is calculated. The entire HTML is not sent again to the client, its only the difference that is sent to the client over the SignalR connection. The browser then updates the UI. Since only the difference is applied to update the UI, the application feels faster and more responsive to the user.

Advantages of Blazor Server Hosting Model:

1. The application loads much faster as the download size is significantly smaller than a Blazor WebAssembly app.
2. Devices with fewer resources should be able to run the application without any problems as the heavy work is delegated to the server.
3. Since the app is running on the server, it can take all the advantages of the capabilities of the .NET Core.
4. All the client needs, to use the app is a browser. The Blazor server-side apps even work on older browsers as there is no requirement for Web Assembly, only HTML, and JavaScript. As the code executes on the server, it is also possible to debug our .NET code in Visual Studio.

Disadvantages of Blazor Server Hosting Model:

1. Blazor server-side limitations relate to the server. For example, we will always need to be the server available i.e. always the server needs to be up and running ( 24X7) to run our Blazor application. If the server is down, the application stops working.
2. Since the server handles the applications and every interaction with it, this means that it can be difficult to serve many users from a limited resource server. However, we can overcome this issue, by using Azure SignalR Service with a Blazor Server app. This service allows a Blazor Server app to scale really well by supporting a large number of concurrent SignalR connections.
3. As every user interaction involves a round trip to the server a higher latency usually exists when compared with Blazor WebAssembly hosting.

Blazor server-side sets up an in-memory session for the current client and uses SignalR connection to communicate between the .NET application running on the server and the clients browser. All memory and CPU usage comes at a cost to the server, for all users. It also means that the client is tied to the server that first served it, so doesnt work with load-balancing.

According to Microsoft:
1 vCPU with 3.5 GB memory handles over 5000 users concurrently.
4 vCPU with 14 GB memory handles over 20000 users concurrently.

ASP.NET Core Blazor Hosting Models Summary:

The following table shows the similarities as well as the difference between ASP.NET Core Blazor Web Assembly and Blazor Server-Side hosting Models.

Note:  One very important point to keep in mind is, Blazor Server and Blazor WebAssembly are just 2 different ways we can host a Blazor application.In the next Video, I am going to discuss the Folder and File structure of the Blazor Server App and Blazor WebAssembly App in detail. Here, in this Video, I try to explain the ASP.NET Core Blazor Hosting Models (Blazor WebAssembly and Blazor Server) and I hope you enjoy this ASP.NET Core Blazor Hosting Models Video.