With ASP.NET Core 3.0, the first version of Blazor will be released. Client-side Blazor allows writing .NET Code that runs in the browser – using WebAssembly. Server-side Blazor allows writing the same .NET code, but it runs in the server. You still don’t need to write JavaScript code for the client as communication between the client and the server is done with SignalR behind the scenes. Server-side Blazor is part of ASP.NET Core 3.0 and released in September-2019. Client-side Blazor is not released with ASP.NET Core 3.0, but in a future version of .NET. Using Blazor today you should know about the limitations of server-side Blazor, and how to write your Blazor components to use it both with server-side and client-side Blazor. This is what you’ll learn from this article.

Blazor

Blazor is based on the syntax of ASP.NET Core Razor Pages. Blazor allows creating components using C# code that can be referenced from other components or with links defined using Razor syntax.

Blazor = Browser + Razor

The first Blazor preview allowed writing .NET Code running in a standardized way in the browser – all modern browsers. Behind the scenes, WebAssembly is used.

WebAssembly (WASM) defines a binary format to run code in the browser. This is possible in all modern browsers. caniuse.com lists Microsoft Edge, Firefox, Chrome, Safari, and iOS Safari, and shows it in development with the Opera browser developer.microsoft.com.

WebAssembly is defined by a W3C specification. Currently, the spec is already a candidate recommendation dated 18-Jul-2019. It’s very new, and there’s a lot of progress going on.

A restriction we have with the first version is to interact with the DOM tree of the HTML elements, JavaScript is needed. Using binary WASM code it’s not possible to directly interact with the HTML elements. Using Blazor, you don’t need to write JavaScript code – this is done behind the scenes. However, this costs performance. On pages with many HTML elements and a lot of integration going on, this can be too slow.

Server-side Blazor part of .NET Core 3.0 allows writing the same code you would create for the client to run on the server.

Server-Side Blazor

Writing client components to run on the server is a concept we’ve done with ASP.NET using WebForms. Nowadays still many applications built with WebForms are out there. Now we have a new concept with some similarities: .NET components running on the server. As WebForms is not supported by .NET Core, the best way to move existing WebForms applications can be server-side Blazor.

Using WebForms, view-state was sending from the client to the server to allow firing events in server-side code for button clicks or selection changes. With server-side Blazor, behind the scenes, SignalR is used as a communication mechanism between the client and the server-side components. A connection from the client to the server is kept open to allow fast communication. This already gives some restrictions using this technology:

The server needs more resources – a connection stays open with every connected client.

Having offline clients is not possible with server-side Blazor. The code runs on the server, so an important part is missing to have this with offline functionality.

Before using this technology with your application, you should check on the expected number of clients, the resources needed with the server, the bandwidth available with all clients… Applications using Web Forms today typically don’t have these constraints because then a different technology would already be in use instead of WebForms. One example where server-side Blazor can be a fully valid scenario: a company-internal application with a limited number of users (could be several thousand) and developers knowledgeable of .NET but don’t like JavaScript.

Moving to Client-Side Blazor

Client-side Blazor will not be released with .NET Core 3. However, it’s already in the state of being an official product from Microsoft, and let’s hope for a release with the next major version of .NET Core – .NET 5.0 in November-2020.

The sample project is created using the Blazor App template, selecting Blazor WebAssembly App with the option ASP.NET Core hosted selected. ASP.NET Core hosted offers services built with ASP.NET Core, and this will be done to return the books from the server.

Instead of hosting client-side Blazor with ASP.NET Core, client-side Blazor can also be hosted with Azure Storage – and using APIs implemented with Azure Functions.





Take away

With the release of ASP.NET Core 3.0, Blazor is ready to use – the server-side version of Blazor. You need to be aware of the limitations: server-side resources to keep connections opened for every client are needed, and you can’t create offline web applications (the code is running on the server). Switching later on to the WebAssembly client-side version of Blazor, the limits are very different. You can define your components now in a way for an easy move between server-side and client-side Blazor.

Happy Coding :)

Thanks :)