By Ankit Sharma
Introduction
We all know that the Blazor framework is a client-side web framework. But is it possible to run a Blazor application separate from a UI thread? The latest version 0.5.0 of Blazor gives us the flexibility to run it in a separate process from the rendering process. We are going to explore server-side Blazor in this article.
What is Server-Side Blazor?
Since Blazor is a client-side web framework, the component logic and DOM interaction both happens in the same process.
However, the design of the Blazor framework is smart and flexible enough to run the application separate from the rendering process. For example, we can run Blazor in a web worker thread separately from the UI thread.
In this scenario, the UI thread will push the events to the Blazor worker thread, and Blazor will push UI updates to the UI thread as needed. Although Blazor does not support this functionality yet, but the Blazor framework is designed to handle such scenarios and is expected to support it in future releases.
Starting from Blazor 0.5.0, we can run a Blazor application on the server. This means that we can run a Blazor component server-side on .NET Core while other functionalities, such as the UI, update. Event handling and JavaScript interop calls are handled by a SignalR connection over the network. The .NET part runs under CoreCLR instead of WebAssembly, which provides us the access to the complete .NET ecosystem, debugging, JIT compilation, and so on. This adds extensibility to the Blazor framework, as the server-side Blazor uses the same component model as running a client-side Blazor app.
Let us create our first server-side Blazor app and explore it to get a better understanding of this new feature.
Prerequisites
- Install the .NET Core 2.1 or above SDK from here
- Install Visual Studio 2017 v15.7 or above from here
- Install ASP.NET Core Blazor Language Services extension from here
Visual Studio 2017 versions below v15.7 does not support the Blazor framework.
Creating a server-side Blazor application
Open Visual Studio and select File >> New >> Project.
After selecting the project, a “New Project” dialog will open. Select .NET Core inside the Visual C# menu from the left panel. Then, select “ASP.NET Core Web Application” from the available project types. Name the project ServerSideBlazor and press OK.
After clicking on OK, a new dialog will open asking you to select the project template. You can see two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.1” from these dropdowns. Then, select the “Blazor (Server-side in ASP.NET Core)” template and press OK.
This will create our server-side Blazor solution. You can see the folder structure in Solution Explorer, as shown in the below image:
The solution has two project files:
- ServerSideBlazor.App: this is our ASP.NET core hosted project.
- ServerSideBlazor.Server: this contains our server-side Blazor app.
All of our component logic lies in the server-side Blazor app. However, this logic does not run on the client-side in browser — instead, it runs server-side in the ASP.NET Core host application. This application uses blazor.server.js for bootstrapping instead of blazor.webassembly.js which is used by normal Blazor apps. This allows the app to establish a SignalR connection over the network to handle UI updates and event forwarding. The blazor.server.js is present in the “\ServerSideBlazor.App\bin\Debug\netstandard2.0\dist_framework” folder, and the