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 happen in the same process.
As you know, one of the attractive features of .NET Core is working with Blazor architecture. In this architecture, Microsoft has tried to be able to use signal R properly. I will present a practical project in the next article if you share and comment on this post.
Blazer Server App has countless features and is completely parallel in competition with Angular. Both languages, namely Angular and Blazer Server App, are among the software that can output as PWA. With the entry of PWA software into the mobile market, they solved almost many of the needs of mobile apps.
For example, suppose a company doing web and mobile software that includes iOS and Android should write code in at least three different programming languages and get different outputs.
With the advent of PWAs in recent years, this problem has been solved to a considerable and acceptable extent. In PWA software, you can get web, Android and iOS outputs simultaneously.
For this purpose, many items such as cost, programming and especially upgrades and further software updates will be saved. By using PWAs, you will code once and have three mobile and web outputs simultaneously.
In PWAs, two factors of use while being offline and also sending notifications were established, and for this reason, these types of software are called PWA applications.
As if there is no difference between native software and PWA anymore.
Also, a PWA program is very suitable for SEO issues if the native software does not have such a capability.
In this section, we assume that you have written your own software and want to get the mobile output in both Android and iOS modes.
To start, go to the site https://www.pwabuilder.com/
After entering the URL, enter your software and press the start button.
This site will take you to the next page after initial checks.
On the next page, click the Package For Stores button and download the relevant outputs.
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 OK, a new dialog will open, asking you to select the project template. You can see two dropdown 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.
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 the 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 normal Blazor apps use. This allows the app to establish a SignalR connection over the network to handle UI updates and event forwarding. The blazor.server.js* is in the “\ServerSideBlazor.App\bin\Debug\netstandard2.0\dist_framework” folder, and the <script> tag to include it in the project is present in the *wwwroot/index.html file.
The blazor.server.js is the only component that separates a server-side Blazor app from a client-side Blazor app. If we provide a reference of blazor.webassembly.js instead of blazor.server.js inside the index.html file, this application will behave like a client-side Blazor app.
The Blazor app is hosted by the ASP.NET Core app, which also sets up the SignalR endpoint. Since the Blazor app runs on the server, the event handling logic can directly access the server resources and services.
For example, we no longer need to issue an HTTP request if we want to fetch any data. Instead, we can configure a service on the server and use it to retrieve the data.
In the sample application we created, the WeatherForecastService is defined inside the “ServerSideBlazor.App/Services” folder.
using System;
using System.Linq;
using System.Threading.Tasks;
namespace ServerSideBlazor.App.Services
{
public class WeatherForecastService
{
private static string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
{
var rng = new Random();
return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = rng.Next(-20, 55),
Summary = Summaries[rng.Next(Summaries.Length)]
}).ToArray());
}
}
}
Further, we need to configure the service inside the ConfigureServices method in the ServerSideBlazor.App/startup.cs” file.
public void ConfigureServices(IServiceCollection services)
{
services.AddSingleton<WeatherForecastService>();
}
We will then inject the service into the FetchData.cshtml view page, where the method GetForecastAsync is invoked to fetch the data.
@using ServerSideBlazor.App.Services
@page "/fetchdata"
@inject WeatherForecastService ForecastService
// HTML DOM here.
@functions {
WeatherForecast[] forecasts;
protected override async Task OnInitAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}
Go ahead and launch the application in Google Chrome. It will open a browser window, and the app will look like a normal Blazor app. Open Chrome DevTools. Navigate to the “Network” tab, and you can see that the application has not downloaded any .NET runtime or the app assembly.
Advantages of server-side Blazor
Server-side Blazor applications provide us with many benefits:
- Since the UI update is handled over a SignalR connection, we can avoid unnecessary page refreshes.
- The app download size is smaller, and the initial app load is faster.
- The Blazor component can fully utilise server capabilities such as using .NET Core compatible APIs.
- It will also support existing .NET tooling, like debugging the application and JIT compilation.
- Since server-side Blazor runs under a native .NET Core process and not under Mono WebAssembly, it is also supported on browsers that have no WebAssembly support.
But there are also a few drawbacks for server-side Blazor apps:
- Since UI interaction involves SignalR communication, it adds one extra step in network calls which results in some latency.
- The scalability of the apps (handling multiple client connections) is also challenging.