Blazor Server vs. Blazor WebAssembly: Just the Facts

Jason Beres [Infragistics] / Tuesday, February 23, 2021

It wasn’t long ago that if you were a C# developer and you wanted to write code for browsers, you pretty much had to use JavaScript. But the web development world changes quickly, and developers no longer have to depend on JavaScript for high-end web app development. If you have ever thought about running .NET in the browser without add-ons and plugins, Blazor is making that a reality thanks to a technology called WebAssembly.

This blog will take a closer look at Blazor WebAssembly and why it’s got a lot of buzz.

What is Blazor WebAssembly?

Blazor WebAssembly, also known as WASM, is a standard developed by the W3C (World Wide Web Consortium) for creating software that runs in the web browser. Unlike JavaScript, Blazor WebAssembly is compiled software that runs at near-native speeds on your CPU.

Blazor WebAssembly programs can be written in other languages, such as C, that can then be compiled to WebAssembly bytecode. WebAssembly is not meant to replace JavaScript, but to run alongside it for programs (or parts of programs) that need to run as fast as possible.

Blazor, which is supported by Microsoft, is an open source and cross-platform web UI framework for building single-page apps using .NET and C# instead of JavaScript. Blazor offers two supported ways to host web applications: Blazor Server and Blazor WebAssembly.

Blazor WebAssembly vs Blazor Server

As mentioned earlier Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it is real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.

Alternatively, Blazor can run your client logic on the server. Client UI events are sent back to the server using SignalR - a real-time messaging framework. Once execution completes, the required UI changes are sent to the client and merged into the DOM.

Blazor Server

Blazor Server uses a standard ASP.NET Core application. Within that application, you can integrate server-side functionality, such as integrating a SQL Server database through Entity Framework (an open-source, object-relational mapping framework that originally shipped as an integral part of the .NET Framework).

The Blazor Server application communicates with the browser through a constant connection using SignalR. You can create client-side pages using Razor components or Razor pages.

Blazor Server Example with SignalR

Blazor Server apps are fast to load and simple to implement. Support for Blazor Server is available with .NET Core 3.1 LTS.

Blazor WebAssembly

Blazor WebAssembly allows the browser to download the Blazor application.

This means that the Blazor application runs in the web browser. No need for a constant connection with a server for the application to work.

Blazor WebAssembly Example

However, because it's solely a client-side application, you can't directly integrate any server-side functionality into the Blazor application.

In-order to do that, you would need to hook it up with a server-side application, such as an ASP.NET Core Web API.

Like with Blazor Server, we can create client-side pages using Razor components or Razor pages.

Similar to JavaScript, Blazor WebAssembly apps run securely on the user’s device from within the browser’s security sandbox. These apps can be deployed as completely standalone static sites without any .NET server component at all, or they can be paired with ASP.NET Core to enable full stack web development with .NET, where code can be effortlessly shared with the client and server.

Full Line of Blazor Features

  • Blazor WebAssembly comes packed with features to keep you productive on your next web app project:
  • Leverage the productivity of C# and strong runtime typing
  • Build on the stable and mature .NET ecosystem
  • Easily reuse code and existing .NET standard libraries on the client and server
  • Shared component model with Blazor Server apps, implemented in Razor component files
  • Deploy your app as a standalone static site, or host it with ASP.NET Core
  • Build Progressive Web Apps (PWA) with offline capabilities and native OS integration
  • Built-in support for authentication
  • Integrated globalization & localization support
  • Environment-based configuration
  • IL trimming and build-time precompression
  • Full stack debugging
  • Great tooling with Visual Studio, Visual Studio for Mac, and Visual Studio Code

What is SignalR?

SignalR is a library for ASP.NET developers to simplify the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data. Chat application is often used as SignalR example.

Blazor Server vs WebAssembly – When to Use?

The hosting model you should use will depend on the objectives and the features you want to offer in your application. If you plan to use the application where Internet connectivity is weak, you might opt for Blazor WebAssembly as it functions well without a server connection. It’s also a better choice if you prefer to work offline.

On the other hand, if you’re looking to build client-facing applications that rank well in Google, Blazor Server is a better choice.

Blazor WebAssembly vs Angular

Angular, the successor of AngularJS, was created by Google to allow frontend developers to interact with both frontend and backend at the same time. Because Angular is JavaScript based, there are a lot of resources to work with.

Angular has been around for a long time, unlike Blazor. It is a production-ready framework with full support for MVC/MVVM applications and it is being used by many large companies. Blazor, on the other hand, is continuously being changed and has not yet achieved enough maturity to contend with Angular, despite being very promising. Angular tooling is also more mature with full debugging support in IDEs like VS Code.

For a more in-depth look at the comparison, check out the Blazor vs Angular Comparison in 2021 blog.

US Presidential Election Dashboard Built in Blazor WebAssembly

To help illustrate the kind of visualizations and analysis that can be supported in a Blazor application, our team at Infragistics created the U.S. Presidential Election Dashboard, a sample application that compares current and historical data and identifies data trends.

Blazor WebAssembly Example Application

This dashboard provides interactive visualizations of election data up to the 2020 election. Built in Blazor (WASM) using Ignite UI for Blazor, this sample application features our Blazor Data Grid, Blazor Tree Map, Blazor Map, and Blazor Data Chart components.

Blazor WebAssembly Components

Ignite UI for Blazor from Infragistics includes professionally designed Blazor components including full support for Blazor Server, Blazor WebAssembly, and .NET 5. You can create rich web applications using your C# skills and eliminate complex and hard to learn JavaScript. Ignite UI for Blazor controls include the fastest data grid, 60+ high-performance charts — stock charts, financial charts, geospatial maps, multi-column combo box — and more. 

We built our full-featured, lightweight Blazor Data Grid and Blazor Table to meet the challenge of displaying high volumes of data, while providing all the interactive features your customers expect. The Data Grid and all the Ignite UI Blazor components were designed for modern C# Blazor apps, including full support for Blazor WebAssembly, so you can deploy to any modern browser for the best possible user experience.

Ignite UI for Blazor

Find out more about our blazing fast Blazor Data Grid and see a Blazor Grid example here.

To see what we included in our latest release of Ignite UI for Blazor, read our blog, Ignite UI for Blazor  — What’s New in 20.2.

If you are considering Blazor and have any questions, shoot me an email jasonb@infragistics.com!

Happy Coding!