We will create our first Blazor project. In fact, we will create two Blazor projects. One uses server-side hosting and the other uses client-side hosting. We will then run the two projects and look at the differences in where and how they are executed.

Along the way, we’ll learn the differences between the two hosting modes and the pros and cons of each

Run the following command to install the Blazor WebAssembly App template

dotnet new --install Microsoft.AspNetCore.Blazor.Templates::3.2. 0-preview120073.1.
Copy the code

You can execute this command from the Package manager console in Visual Studio or from a command prompt.

Click here to obtain the latest Blazor WebAssembly application template

Blazor hosted models

Blazor has two hosted models, Blazor WebAssembly (client-hosted model) and Blazor Server (server-side hosted model)

As the template name implies, use the Blazor Server application template to create a Blazor application with a server managed model, and use the Blazor WebAssembly template to create a Blazor application with a client managed model.

Blazor Server with Blazor WebAssembly

There is not much difference in project structure and layout between the two project types.

Configure multiple startup projects in Visual Studio

Multiple projects can be configured as StartUp projects in Visual Studio. Here are the steps.

Right-click the solution name in Solution Explorer, and select Set Startup project options

Select multiple launch project radio buttons. For each project that you want to set as a startup project, select Start from the Action drop-down list.

Blazor WebAssembly hosted models

With this hosted model, applications run directly in a browser on WebAssembly. Thus, everything needed for the application, namely the compiled application, its dependencies, and the.NET runtime, is downloaded from the server to the client browser. The Blazor WebAssembly application can run entirely on the client without connecting to the server, or we can choose to configure it to interact with the server using A Web API call or SignalR.

Benefits of the Blazor WebAssembly hosted model:

Blazor WebAssembly applications can run entirely on client computers. Therefore, after downloading the application, there is no need to connect to the server. This means your server doesn’t have to be running 24/7.

Work is unloaded from the server to the client. Client resources and functions are being used.

We don’t need a full-fledged ASP.NET Core Web server to host the application. All we need is a server somewhere that can deliver the application to the client browser. This means we can host the application on our own server somewhere on the Internet, in the cloud, as a static website on Azure, or even on a CDN content delivery network.

Disadvantages of Blazor WebAssembly hosting:

 The first request usually takes longer because the entire application, its dependencies, and the.NET runtime have to be downloaded to the client browser. Keep in mind that this is just the first request that takes longer than usual. If the same client accesses the application later, it usually starts quickly because the browser caches the files.

Because the application runs entirely on the client browser, it is limited to the capabilities of the browser.

Depending on the nature of the application, capable client hardware and software are required. For example, from a software perspective, you need at least one browser that supports WebAssembly.

Blazor Server hosting model

With this managed model, the application executes on the server. Establish SignalR connection between client and server. When an event occurs on the client (such as clicking a button), information about that event is sent to the server over the SignalR connection. The server handles the events and calculates the differences for the generated HTML. The whole HTML is not sent to the client again, it is just a difference sent to the client over the SignalR connection. The browser then updates the UI. Because only differences are applied to update the UI, the application feels faster and is more responsive to the user.

Benefits of the Blazor Server hosted model:

The application loads faster because the download size is significantly smaller than the Blazor WebAssembly application

Because the application runs on the server, it can take full advantage of the server’s capabilities, including using any.NET Core compatible API.

All clients needed to use the application are browsers. Even browsers that do not support WebAssembly can be used.

More secure, because the.net /C# code of the application is not provided to the client.

Disadvantages of Blazor Server hosting:

A full-fledged ASP.NET Core server is required to host the application. Serverless deployment scenarios, such as providing applications from the CDN, are not possible.

An active connection to the server is always required. This means keeping the server running 24X7 24/7. If the server shuts down, the application stops working.

Because every user interaction involves a round-trip to the server, there is usually a higher latency than Blazor WebAssembly hosting.

Scalability can be challenging, especially for applications with a large number of users, because the server must manage multiple client connections and handle client state. However, we can overcome this scalability problem by combining the Azure SignalR service with the Blazor Server application. This service allows Blazor server applications to really scale well by supporting a large number of concurrent SignalR connections.