Introduction to Blazor Server
Let’s take a first look at Blazor Server. We want to learn about what Blazor Server is and how a Blazor Server application appears in the browser. We create our first project, learn about the fundamentals and the architecture of Blazor Server apps.
Architecture
Let’s talk about the architecture of a Blazor Server application. A Blazor Server application runs on an ASP.NET Core backend and can be accessed using a browser. The ASP.NET Core application can either be hosted self-contained or running on IIS.
On the client-side, any browser can be used to access the website. Blazor Server uses a small JavaScript file to run and HTML and CSS to rendering its user interface. Blazor Server does not use WebAssembly.
On the server-side, the Blazor application contains the .NET code and handles a copy of the Document Object Model (short DOM) for every client. We can call our .NET APIs without an additional network roundtrip, and we can directly access our business logic from the user interface code.
If the user interacts with the application, Blazor will send an event to the server using a persistent SignalR WebSocket connection. The server will decide how to react to the user input and return changes to the DOM or execute backend functionality.
Every interaction triggers a network communication between the client and the server. Unlike JavaScript web frameworks that handle the user interaction client-side, Blazor Server handles user interaction on the server-side.
Blazor Server demo
Now let’s see Blazor Server in action. Let’s jump into Visual Studio to create our first Blazor Server application. Make sure to install the latest .NET Core 3.1 SDK and update Visual Studio to the latest version.
Create a Blazor Server App project
First, let’s create a new project using the button in the Get started section on the right. In the wizard, we select the Blazor App template and click next. Next, we need to define a project name and set the project’s location. After that, we click Create.
In the Blazor specific app creation window, we select the Blazor Server App template. We make sure that we choose the correct framework .NET Core 3.1 or in the future when available .NET 5.
We don’t use Authentication for this first example app, and we don’t change anything else in the Advanced section on the right. Let’s click on the Create button to generate the project and open the Visual Studio code editor.
Build & First Start the Blazor App
Before we look at all the files, let’s start the app and see what’s in the generated app from a user’s perspective.
After a few seconds of build time, the app starts in your default browser. We see a two-column layout with a navigation on the left and the page content on the right.
The Counter page contains a component that uses local state to count every button click.
The Fetch data component loads data from a service and displays it in a table.
Examining the Network Traffic
After taking a look from the user’s perspective, let’s open the developer tools. We open the Network tab and reload the page with disabled cache to see data that we receive from the server.
We see a handful of static resources, including the Bootstrap user interface framework, additional CSS styling for the page, and fonts.
The exciting part of a Blazor Server application is the blazor.server.js file. It contains JavaScript functions that a Blazor app needs to run and communicate with the server. And the entire file is only 76 kb.
In total, the full page-load of our Blazor Server app requires to transfer 165 kb of compressed data. Compared with other web frameworks, that’s pretty small.
Now, let’s go back into Visual Studio and take a look at the project structure.
Project Structure: Files & Folders
In the wwwroot folder, we have our static resources. These are files transferred from the server to the client and can be accessed from the app while running in the browser. For example, we have the Bootstrap user interface framework, the fonts, and our site’s CSS definitions.
Next, we open the Pages folder. Here we have the definitions for all pages of our application. Let’s take a closer look at the Counter page.
At first sight, a page is almost the same as a component. The only difference is the @page directive on the first line of the page. It tells Blazor that a user can navigate to this component and therefore is a page.
In the code section of the FetchData component, we access a service from within a Blazor component and asynchronously load data from the service. The template above the code block defines how the data renders on the screen.
In the shared folder, we have additional components that are reused within our application. We have the MainLayout and the NavMenu that contains the navigation we saw on the left column of the application.
I have a dedicated video about “How to Create a Blazor component” linked in the card above. Check it out to learn more about Blazor component development.
Those are the most critical parts of a Blazor Server application. Let’s take a look at the advantages and disadvantages of choosing Blazor Server for a project.
Advantages
Now that we have a fundamental understanding of the Blazor Server architecture and saw the first project in Visual Studio, let’s discuss the advantages of Blazor Server.
Blazor Server only sends data to the client that is needed at the moment of user interaction. When we launch the application in the browser, only the first page gets downloaded and rendered.
Let’s compare that to a typical React or Angular application. In a single page web application based on any popular JavaScript web framework, you bundle your application and send the entire application to the client before it runs. Depending on the application and framework size, you send a lot of data to the client.
Using Blazor Server, you only send the data required to render the application initially. In short, Blazor Server applications start very quickly because the client does not have to download and execute a lot of code to get started.
Because the download size is small, the rendering is also quick. The browser does not have to initialize a big single page application. It just renders the HTML and CSS for the initial page.
Blazor Server supports every browser that supports HTML and CSS. It does not require WebAssembly support, which makes Internet Explorer 11 a supported browser. If you’re building corporate applications and still have the requirement to support Internet Explorer 11, Blazor Server is the only viable rendering model.
If you want to learn more about Blazor browser support, check out the video showing in the YouTube card above.
We learned that the .NET code of a Blazor Server application runs on the server-side. It means that the .NET code remains on the server and will not be sent to the client. Therefore, business logic cannot be decompiled, and your sensitive business algorithms cannot be analyzed.
Having the user interface .NET code on the server-side allows you to have the Blazor code and other business code in the same project or at least in the same solution. Blazor Server provides a simple project structure and allows access to the business logic from your user interface classes directly. You don’t need to implement an API layer to access data from the database.
Technically, you can connect to a database from your Blazor code because you are on the server-side. In traditional web applications, you always need to implement an API layer between your client and your database access code. Blazor Server allows you to simplify the architecture.
Keep in mind that if you have other clients for the same application, an API layer still provides flexibility and advantages. But Blazor Server gives you different options to choose from.
All in all, Blazor Server allows you to be very productive and create modern single-page web applications without worrying about installing hundreds of JavaScript packages. You can write the client and server code using C#.
Blazor provides you with a simple yet powerful programming model. You create your application based on a Visual Studio template, and you’re good to go.
Disadvantages
After we talked about all the advantages of Blazor Server, let’s take a look at why Blazor Server might not fit your scenario or what other things we need to take into consideration before we decide to use Blazor Server for a project.
As we learned in this video, Blazor Server runs on the server. One of the requirements for a Blazor Server application is to run on ASP.NET Core. It’s not something that holds you back from building a Blazor Server application, but it differs from JavaScript web frameworks.
Usually, React, or Angular applications build to static HTML, CSS, and JavaScript files that can be hosted as static resources on any webserver.
However, when you use Blazor Server, you need to run ASP.NET Core on the server because the application is not compiled into static artifacts. With every user interaction, the server evaluates the appropriate response to the client.
Another thing to keep in mind is that every user interaction triggers a network communication. As we learned, the server holds a copy of every client’s DOM, and for every user interaction decides what to render next. This architecture does not allow offline support.
Also, a steady and reliable network connection is a requirement to run a Blazor Server application successfully. Every user interaction evaluates on the server-side, and the results need to be transmitted to the client afterward. Without a steady internet connection, this model does not work.
Last but not least, remember that the server handles the requests of every client. If running on Azure, a standard virtual machine for 50$ a month can handle around 5000 concurrent client connections. For a 200$ a month machine, you already can handle about 20’000 concurrent client connections.
If you build a corporate application, a business to a business application, or a consumer web application for a specific use case, scaling should not be an issue. If you need more power, you can upgrade your server to fit your needs.
However, if you plan on building the next Twitter or Facebook with millions of concurrent users, Blazor Server might not be the right technology choice for you. It does not scale to handle millions of requests at the same time without additional effort.
Vertically scaling is more complicated with a Blazor Server application compared to other web application architectures.
Conclusion
Blazor Server provides a new, exciting programming model for various scenarios. At first, it is not easy to understand how Blazor Server is different than a JavaScript web framework.
After looking at the architecture of a Blazor Server application and creating our first project in Visual Studio, we have a pretty good feeling about how a Blazor Server application runs.
Is Blazor Server a jack of all trades, and should you use it for every new web project? Of course not. There are scenarios where Blazor Server has limitations that do not help you reach your goals.
Luckily Blazor offers another rendering model called Blazor WebAssembly. Blazor WebAssembly shares the same component model but works entirely differently. But we’ll save that for another video.
Don’t forget to subscribe, like the video, if you made it that far, and let me know about your experience with Blazor Server. See you in the next video.
PREMIUM CONTENT
