Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Build Server-Side Blazor Applications

DZone's Guide to

How to Build Server-Side Blazor Applications

Originally built as a client-side framework, Blazor now supports the development of server-side web applications. Read on to get started!

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Recently, Blazor got an important update — support for server-side Blazor applications. This blog post introduces how server-side Blazor applications work and what are the pros and cons when considering building these.

What Is a Server-Side Blazor Application?

By default, Blazor applications run in the browser and communicate with server-side APIs. All rendering and UI logic runs in the browser. With server-side Blazor, all Blazor components run in the server on .NET Core and the UI communicates with the server using SignalR. From Blazor 0.6.0 on, support for Azure SignalR Service is available. With this we can also have a massive scale for SignalR.

But why we should run Blazor on the server when we want the UI to be as responsive as possible and react lightning fast? There are scenarios where we want to keep the browser loaded as little as possible and move all the expensive work to the server. We still build the UI with .NET Core and C# but we run it on the server, leaving less work and load for the client.

Server-Side Blazor Application Template

With the newest Visual Studio tooling for Blazor there is new project template for server-side Blazor applications.

When creating a server-side Blazor project we get two applications: one for Blazor UI and another one for Blazor server-side code.

The image above illustrates a server-side Blazor solution. Blazor5.App is a project for Blazor UI. It contains pages, views, and client-side UI artifacts like stylesheets and JavaScript files. Of course, all C# code related to the UI logic is also in this project (classes, code-behind classes, etc).

Blazor5.Server is a project for server backends. It has a reference to Blazor5.App and it knows how to run both applications on the server-side.

The Program class of Blazor5.Server initializes the usual web host. The Startup class calls methods to make server-side Blazor possible:

  • services.AddServerSideBlazor<App.Startup>()
  • app.UseServerSideBlazor<App.Startup>()

This is all we have to do during application initialization. These methods make the magic and our thin UI in the browser starts talking to Blazor components in the server.

Let's take a look at what is loaded when server-side and client-side Blazor applications are opened in the browser.

Comparing Client-Side and Server-Side Blazor Applications

Let's start with a regular client-side Blazor application that runs in the browser and communicates with the server backend over AJAX calls if data is needed. When opening the Blazor app in the browser a long list of files are loaded. Some of these are shown in the following screenshot.

In total, our browser made 23 requests and transferred 1.9MB of files.

When loading the same page in a server-side Blazor application we get totally different set of files.

The numbers are way smaller now. Just 10 requests and 99.5KB. But what we additionally get is a websocket connection as all communication between application components in the client and server goes over SignalR.

Pros and Cons of Server-Side Blazor Applications

Although we get faster page loading time initially we still have to consider some issues. Here's a summary of the good and bad of server-side Blazor applications.

Pros

  • Smaller download size.
  • Applications open faster.
  • Using of server-side API-s and tooling.

Cons

  • No offline applications.
  • Network means at least small latency.
  • WebSocket connections are sometimes hard to debug.

Wrapping Up

Running Blazor UI components in the server and communicating changes using SignalR makes it possible to build Blazor applications that are thin and not very demanding on the browser. I'm sure there are existing scenarios where the server-side model is a perfect match. It still comes with a price as offline applications are not easily created with server-side Blazor. Of course, it possible that there will be a hybrid model also available one day that is supported by APIs and tooling. 

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,blazor ,server-side development ,web application development ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}