Blazor Server versus Blazor WebAssembly

19th April 2020

At present, Blazor offers two different hosting models that you can choose from. We will have a look to see which one has to offer and what the differences between the two are.

The Benefits of Blazor

But first, we will run through Blazor and it's benefits. Afterwards, we will compare the differences between the different hosting models.

Quick Page Refresh

Blazor only reloads the parts of the page that need to been updated when clicking on an internal link. Not only does this reduce load on the server, it makes it more instant to the end-user which is always going to be a good thing.

C# in Client-Side Functionality

In the past, any browser functionality would had to have been coded in JavaScript, or a JavaScript library. Not any more. Blazor allows you to code client-side functionality in C#.

Some JavaScript will still exist in Blazor. For example, the SignalR connection between the client and the browser uses JavaScript if you are using Blazor Server. But there is functionality that can replace JavaScript with C#.

One Language

I will stress that with caution that it's possible to code a whole Blazor application with just C#. As a result, this means that your skills as a full-stack developer may only require C#. However, there is some client-side functionality that will need to use JavaScript to give you the results you want.

The Differences between Blazor Server and Blazor WebAssembly

Now that we've explored some reasons to use Blazor for our web application, that's explore the differences between Blazor Server and Blazor WebAssembly.

But first, if you are new to Blazor, I would suggest reading my article entitled "Introduction to Blazor Hosting Models" first.

In addition, I would also recommend that you watch my video on the same subject.

Retrieving Data

One of the big differences is the way each application retrieves data. Blazor Server establishes a SignalR connection between the client and server for communication. In Blazor WebAssembly, an API would need to be integrated to power server-side functionality. As a result, you would need to create a new application to power the API.

Working Offline

Blazor WebAssembly will work when you don't have an internet connection. This is similar to a JavaScript application and is great if your application can run offline. So, if you are looking to build a calculator, or an interactive application, Blazor WebAssembly is a great choice. Blazor Server requires a constant connection between the server and the client.

Server-Side Rendering

Need your application to be read by search engines? Then Blazor Server is the solution for you. Blazor Server will automatically output the HTML that is intended on the page. If you view the source of the web page, you will see what I mean. As a result, this makes it much easier for search engines to read the content on your web page.

Launch of the Web Application

Open your Developer Tools in your browser when you launch your Blazor WebAssembly application. You will see a large number of HTTP requests being made. What happens is that the application will download all the DLL's to the browser to make it work as you can see below:

HTTP Requests in a Blazor WebAssembly application

This is different to Blazor Server. With Blazor Server, the only additional HTTP request made is the SignalR connection between the client and the server.

Which to Choose

Not sure which one to choose? Well it depends on what application you are building. If you are requiring a front-end application that needs to be read by search engines and contains a lot of server-side functionality, then I recommend Blazor Server. However, if you just want a light-weight application that needs limited interaction between the client and server, then Blazor WebAssembly is a better choice.

Want More ASP.NET Core Coding Tutorials?

Subscribe to my YouTube channel to get more ASP.NET Core coding tutorials.

You'll get videos where I share my screen and implement a how-to guide on a topic related to ASP.NET Core.

You can expect to see videos from the following technologies:

  • Blazor
  • Web APIs
  • SQL Server
  • Entity Framework
  • SignalR
  • and many more...

By subscribing, you can get access to all my ASP.NET Core coding tutorials completely free!

And so you never miss out on a new video, you have the option to be notified every time a new video is published.

So what are you waiting for?

To subscribe, click here to view my YouTube channel, and click on the red "Subscribe" button.

David Grace

David Grace

I am a .NET developer, building web applications in .NET Framework and .NET Core with a SQL Server database.

Some of the .NET packages I have used include Entity Framework and MVC.

I've also used many JavaScript frameworks such as React and jQuery, and have experience building CSS in SASS.

Twitter Feed