Blazor Webassembly vs Blazor Server – What is Difference and What to Use?

In this article, I want to compare two Blazor Project Templates: Blazor WebAssembly and Blazor Server. I will create two identical projects but with different Blazor templates. And explain the difference.

What is Blazor?

Blazor is a .Net UI Framework for building interactive applications that can run both server-side and client-side. Using the experience of Angular, React and Vue, Microsoft developers decided to create Blazor. Javascript is the main language in the first frameworks, and C# is the default language in Blazor. Component development of web interfaces is also taken as a basis.
Currently, there are two project templates available: Blazor Server App and Blazor WebAssembly App.
Blazor Project Template Types

Blazor WebAssembly

When you run a Blazor WebAssembly App, the C# and Razor code files are compiled into .NET assemblies. Blazor WebAssembly loads the .NET runtime, assemblies, and their dependencies, and configures the .NET runtime to run the assemblies. Blazor WebAssembly optimizes the assembly loaded into the browser. When an application is published, unused code is removed and downloaded assemblies are cached in the browser.

WebAssembly Project Structure

Folder structure and Program.cs file:
blazor webassembly project structure

WebAssembly Pros and Cons

Pros
  • Application is very fast
  • Application can work in offline mode
  • Serverless deployment is possible
  • Application can run in modern browsers without additional plugins
  • Any .NET standard 2.0 C# can be run

Cons
  • Requires modern browsers(with WebAssembly support)
  • Long initial load time
  • Debugging a bit limited

Blazor WebAssembly – Loaded Assemblies

Here is the result of the first request to the WASM. You can notice application downloads the CLR, Assemblies, JavaScript, CSS. Thus it can work in offline mode, without the server.
blazor webassembly loaded assemblies

Blazor Server

In the Blazor Server Application, the main part of the project runs on the server side. Interaction with the user interface, working with events, and even JavaScript calls on the client side are carried out according to the client-server model through SignalR.
Since the main part of the application is on the server side, all files downloaded by the client are much smaller compared to Blazor WebAssembly. The application is not limited to the browser and can take advantage of server-side processing capabilities. In addition, the application may work with legacy browsers that do not support WebAssembly.

Blazor Server – Project Structure

Folder structure and Program.cs file:
blazor server project structure

Blazor Server – Interaction with Server

Every interaction with the application is sent to the server via WebSocket. Connection established with the wss-URL similar to wss://localhost:7141/_blazor?id=SXhvzk7nankLO-QOZNzw8A and you can check them in the Network Tab -> WS(Websockets):
Blazor Server Communication

Blazor Server Pros and Cons

Pros
  • Application size is small
  • Application loads faster
  • Full debugging support
  • Older browsers are supported
  • Complete .NET API compatibilityApp Code Securely

Cons
  • Application should keep connection with server
  • Scalability depends on server capabilities
  • Serverless deployment isn’t possible

What to choose?

If you want to manage a large number of users and don’t have secret code running, use Blazor Webassembly. Use Blazor Server if you need first page speed load and if you have sensitive code that you don’t want to send to the browser.

Leave a Reply

Your email address will not be published. Required fields are marked *