Introduction to Blazor: The Latest Web Development Starting with ASP.NET Core

This is the article for Day 20 of the Mamezou Developer Site Advent Calendar 2024.

Come to think of it, I started wondering, "What's been happening with .NET lately?", so I'd like to write an article related to the latest LTS version, .NET 8.0.

In the past few years, I've had many opportunities to use Java in development projects, and it's been about 10 years since I last touched .NET. During this decade, .NET has evolved significantly; the .NET limited to Windows became cross-platform with the release of .NET Core^[1].

Among them, this time I would like to focus on ASP.NET Core Blazor (hereafter referred to as Blazor), which did not exist 10 years ago.

First, let me explain what Blazor is.

In simple terms, it's a framework for developing Web UIs using C#. With Blazor, you can build rich and interactive Web UIs using C# and .NET instead of JavaScript or TypeScript.

In this way, with the advent of Blazor, being able to develop from frontend to backend using a single programming language—namely, C#—can be considered a great advantage for developers.

Blazor has two execution models: "Blazor WebAssembly" and "Blazor Server." A feature of Blazor is that it can run these two different models with almost the same code.

The following diagram illustrates the two execution models.

Blazor WebAssembly is a client-centric execution model. Based on the standard technology called WebAssembly, Blazor applications run on the browser. Since the Blazor application and its dependent libraries are downloaded to the browser, there is some overhead during initial startup. However, once started, a constant connection to the network is not required.

On the other hand, Blazor Server, as its name suggests, is a server-centric execution model. Only the Document Object Model (DOM) is returned to the browser, and processing requests are made to the server-side in response to operations on the UI. Using a real-time communication library called "SignalR," changes between the client and server can be reflected immediately to each other. Due to this nature, initial startup is fast, but a constant connection to the network is required.

Blazor United is a feature introduced in .NET 8.0 that allows switching between four rendering modes for each page or some components. The four rendering modes in Blazor United are as follows:

1. Static Server Side Rendering (Static SSR)
2. Interactive Server
3. Interactive WebAssembly
4. Interactive Auto

Until now, when developing web applications with Blazor, you had to choose one of the two execution models mentioned earlier at the application level. With the introduction of Blazor United, it has become possible to use multiple rendering modes within a single application.

Now, let's take a look at each of the rendering modes in Blazor United.

Static SSR is a rendering mode similar to the Razor pages of ASP.NET MVC before Blazor appeared. It means that the rendering process is performed only once on the server side and then returned to the client. It can be used on pages where interactive operations are not required after the page is displayed.

This is almost the same execution model as the conventional Blazor Server, where the code blocks (C# code parts) of Razor pages are executed on the server side. Communication between the client and server is linked via a SignalR connection, and rendering is performed on the client-side browser.

From .NET 8.0, with Blazor United, you can specify the SignalR connection at the page or component level. Previously, the SignalR connection was maintained throughout the same session from the browser's startup to shutdown. This has been improved in .NET 8.0 so that the SignalR connection and related server resources are released when the page switches.

This execution model is almost the same as the conventional Blazor Assembly, where processing is performed within the browser using WebAssembly. In cases where only this mode is used throughout the application, server-side processing becomes completely unnecessary, allowing you to deploy the Blazor application on a static web server.

In Blazor WebAssembly, there was an issue where the initial startup was slow, and Interactive Auto solves this problem.

When the first page is called, it operates in Interactive Server mode while the WebAssembly modules are downloaded in the background. Once all the WebAssembly modules are cached on the browser side, it operates within the browser thereafter.

With the introduction of Blazor United, it doesn't mean that developing applications with the traditional Blazor WebAssembly or Blazor Server is no longer done. Even in .NET 8.0, it is possible to choose the traditional development models, and I think it's best to select the optimal development model according to the characteristics of the development project or system.

Here, I would like to introduce how to proceed with the development of each Blazor application using Visual Studio.

I apologize, but this time I will limit the content to the preparation for Blazor application development using Visual Studio's project templates. Therefore, I will explain the project structure and individual elements at another opportunity.

To develop a traditional Blazor WebAssembly type application using Visual Studio, select "Blazor WebAssembly App" in the project templates.

For the additional information, you can leave it as default. By selecting "Include sample pages," sample applications will be added when the project is created.

The project structure of Blazor WebAssembly type is as follows. As mentioned earlier, I will explain the individual elements within the project at another opportunity.

If you run it as is without making any changes, a web application like the following will start.

To develop a traditional Blazor Server type application, select "Blazor Web App" in the project templates.

There is also a project template called "Blazor Server App," but please note that this is not supported in .NET 8.0.

In the additional information, please select the following two options. This allows you to develop a Blazor application using only the server-side rendering mode.

• Interactive render mode: Server
• Interactivity location: Global

The project structure of Blazor Server type is as follows.

Compared to the Blazor WebAssembly type, server-specific Routes.razor, appsettings.json, and the error page Error.razor have been added.

Note that the web application that starts is the same as the Blazor WebAssembly type, so I will omit it.

To develop a Blazor United type application introduced in .NET 8.0, select "Blazor Web App" in the project templates.

In the additional information, please select the following two options. This allows you to develop a Blazor application that combines four types of rendering modes.

• Interactive render mode: Auto(Server and WebAssembly)
• Interactivity location: Per page/component

The project structure of Blazor United type is as follows.

Compared to the project structures of Blazor WebAssembly type and Blazor Server type, you can see that two projects have been created.

Note that the web application that starts is the same as the others, so I will omit it.

This time, I wrote about an overview of ASP.NET Core Blazor.

With the introduction of Blazor United in .NET 8.0, it is said to have evolved into a full-stack web UI framework. Although it's still limited now, I hope that Blazor will be included as an option when developing web applications in the near future.

On the other hand, I also got the impression that it has become somewhat more complex with the introduction of Blazor United. Previously, I remember that even engineers like me could develop with .NET without hesitation, but with the current Blazor, I felt the need for certain design policies and guidelines. I would like to clarify these selection criteria and ways of thinking in future posts.

Thank you very much for reading to the end. I hope you look forward to the next post.