Blog

Blazor Server vs Blazor WebAssembly: Choose the right one for your project

Category
Software development
Blazor Server vs Blazor WebAssembly: Choose the right one for your project

Blazor is a Microsoft framework that enables developers to build interactive web applications using C# instead of relying solely on JavaScript. It’s part of the .NET ecosystem and allows developers to create web applications using familiar tools and languages.

It offers two hosting models: Blazor Server and Blazor WebAssembly, each with unique characteristics and use cases.

Blazor Server Model

One of Blazor’s hosting models, the application runs on the server in this model and dynamically updates the user interface (UI) over a SignalR connection. 

Blazor Hosting Server Microsoft Learn
Source: Microsoft Learn

Here are some key aspects: 

Communication:

  • Server-Centric: The application logic executes on the server.
  • Real-time Updates: UI changes transmit over a SignalR connection, minimizing the data transferred between the server and the client’s browser. 

Performance and Scalability:

  • Reduced Client Load: The client only receives UI updates, reducing the processing required on the client side.
  • Scalability: Every visitor has a separate web socket connection, meaning the application consumes more memory per user. This can lead to the need to scale hardware more quickly than the Blazor WebAssembly Model. 

Blazor WebAssembly Model

On the other hand, this hosting model executes the application directly within the user’s browser by leveraging WebAssembly. 

Blazor WebAssembly Blazorice
Source: Blazorise

Here are its notable characteristics:

Communication:

  • No Persistent Server Connection: Once the application is loaded, it doesn’t require a constant connection to the server for operation.
  • Data Fetching: Can fetch data directly from APIs or servers independently once loaded.

Performance and scalability:

  • Larger Initial Load: The startup time might be longer than the Blazor Server since the entire application is loaded initially.
  • Client-Side Processing: Offers better responsiveness as it handles most operations on the client side, reducing server load.

Execution:

  • Client-Side Execution: The entire application, including the logic and UI components, is downloaded to the client’s browser and executed there.

Blazor Server vs. Blazor WebAssembly

Choosing between these two hosting models depends on various factors related to your project requirements, such as performance, security, infrastructure, and user experience expectations. 

Here are some key factors that you have to take into consideration :

Performance and Responsiveness:

  1. Blazor Server: Performs server-side rendering, which might lead to slightly faster initial load times and less data transferred. Since it requires a constant connection to the server, it could impact responsiveness in case of network latency or server load.
  2. Blazor WebAssembly runs entirely on the client side, allowing for better responsiveness after the initial load. Depending on its size, the application might have a longer initial load time because it is downloaded to the client’s browser.

Scalability:

  1. Blazor Server: It works well for applications with moderate scalability needs since most of the work is handled on the server.
  2. Blazor WebAssembly: More scalable since it offloads processing to the client’s browser, reducing the server load.

Offline Support

  1. Blazor Server: A constant connection to the server means offline support can be challenging to implement.
  2. Blazor WebAssembly: Supports offline scenarios by allowing the application to run entirely on the client side once downloaded.

Security

  1. Blazor Server: Has tighter control over the code and logic on the server, potentially providing better security for critical business logic.
  2. Blazor WebAssembly: Executes code on the client side, which might expose it to certain security risks if mishandled.

Deployment and Hosting

  1. Blazor Server: Is simpler to deploy as it’s server-based, requiring ASP.NET Core hosting.
  2. Blazor WebAssembly: Can be hosted on various platforms (like static file hosting) since it runs entirely on the client side.

Resource Constraints

  1. Blazor Server: Requires fewer client-side resources but more server resources due to constant communication.
  2. Blazor WebAssembly: Because it runs entirely in the browser, it might demand more client-side resources (memory, processing power).

Also, consider Team Expertise. If the team has experience with client-side development or SPA frameworks, Blazor WebAssembly might be more familiar to them. But, if the team is more familiar with server-side technologies, Blazor Server might be a smoother transition.

The Ultimate Performance Test

To see these two hosting models in action, we equipped a local Microsoft SQL database with a new “OrderItems” data table. We used that table in four testing cases, with 10K, 50K, 100K, and 250K rows holding dummy data. 

Microsoft SQL database used in testing
Microsoft SQL database used in testing

In each case, we tested both Blazor Server and Blazor WebAssembly to check the speed of getting the data. In that way, we can conclude which hosting model is more suitable for working with large amounts of data. We fetched data locally over the “api/OrderItems” endpoint in both cases:

using BlogBlazorWebAssembly.Data;
using BlogBlazorWebAssembly.Data.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
namespace BlogBlazorWebAssembly.API.Controllers;
[ApiController]
[Route("api/[controller]")]
public class OrderItemsController : ControllerBase
{
	private readonly BlogContext _context;
	public OrderItemsController(BlogContext context)
	{
    	_context = context;
	}
	[HttpGet]
public async Task<IEnumerable<OrderItem>> Get() => await   _context.OrderItems.ToListAsync();
    
}

At the endpoint, we used “Index.razor” page within both projects to measure time spent on loading the data during initialization:

@page "/"
@using BlogBlazorWebAssembly.Data.Models;
@using BlogBlazorWebAssembly.Data;
@inject HttpClient Http
<PageTitle>Index</PageTitle>
<h1>Hello from Blazor Web Assembly!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
@code{
	private List<OrderItem> _orderItems = new();
	protected override async Task OnInitializedAsync()
	{
    	_orderItems = await Http.GetFromJsonAsync<List<OrderItem>>("api/OrderItems");
}
}
Code language: PHP (php)

After running the four tests on both hosting models, it was pretty clear that the Blazor Server app performs better in scenarios where there are large amounts of data.

Blazor Server vs Blazor WebAssembly Table view of loading time

Since the biggest number of rows was 250K, it is reasonable to expect that the difference in performance with an even bigger number of rows (talking about hundreds of thousands or millions) increases even more. You can see the graph below: 

Blazor Server vs Blazor WebAssembly Data Loading Time Comparison

The numbers clearly show that Blazor Server has better performance capabilities when discussing data loading. Therefore, this model is better for all companies whose business relies on large amounts of data.

Which Blazor hosting model to use?

Probably the most important part of making the decision between these two hosting models is considering and analyzing the project’s specific needs, such as the expected number of users, offline capabilities, performance requirements, and the expertise of your team. They both have pros and cons. 

Blazor Server is great if you want an application supported by search engines and with server-side support within the application. On the other hand, if you need a quicker application that works offline, Blazor WebAssembly should be your choice. The best part is that both models offer unique advantages, allowing clients to choose the best fit for their specific project needs.

Cover Illustration: AI Generated

CONTACT US

Exceptional ideas need experienced partners.