Published in


Blazor Server vs Blazor Web Assembly

In web development, JavaScript plays a critical role in achieving client-side functionalities. It works by modifying the Document Object Model (DOM) of the browser. This, in turn, saves a lot of back-end calls. The result — you can build functionalities effortlessly.

In recent times, advanced versions of JavaScript-based UI frameworks have been developed (Angular, Vue, React, and many more). These UI frameworks use typescripts (a superset of JavaScript which helps in the development of large applications).

To achieve the client-side functionalities with better performance, there is a need to learn Javascript. However, based on the UI framework, the version of JavaScript that one needs to learn also differs. To reduce the dependency on JavaScript, Microsoft released its latest web framework called Blazor.

It helps developers achieve the same JavaScript functionalities through the Blazor web framework. In this post, let us see in detail about Blazor and its hosting models.

Table of contents

What is Blazor?

Blazor is an open-source web framework from the house of Microsoft. It was released in the year 2018. It allows developers to build applications using C# and the .Net libraries instead of JavaScript on the client-side. It helps in running the application in the browser, and it can be hosted with two techniques viz. Blazor web assembly and Blazor web server.

What is Blazor Server?

Blazor Server is a hosting technique that was released along with the .Net Core 3.0 version. It uses the ASP.Net Core application, which helps integrate the server-side functionality.

Along with this, the client-side pages are created using Razor components. On running the application, a connection is established between the browser and server-side using SignalR (an open-source library for ASP.Net-based applications used to send asynchronous notifications to client-side web applications).

The server then sends the payloads to the client, which updates the page. It also enables two-way communication between server and client-side.

Pros and cons of Blazor Server

Here are some of the advantages of using Blazor Server -

Here are some of the disadvantages of using Blazor Server -

What is Blazor web assembly?

Blazor Web Assembly (WASM) was released in May 2020. It works very similarly to Single Page Application (SPA) frameworks (Angular, React, Vue..). Here, the C# and Razor components are compiled as .Net assemblies, then downloaded and run on the browser side (client-side).

Once the application is downloaded on the client-side and as it begins to run, there is no requirement of SignalR here for maintaining the connection between Server and client. Server-side functionalities cannot be integrated with this application, and it requires a Web API to communicate and exchange required data.

Pros and Cons of Blazor Web Assembly

Here are some of the positives of using Blazor Web Assembly -

The only negative of using Blazor Web Assembly is the high initial load time of the application.

Implementing Blazor Server

Open Visual Studio 2019, and select ‘Create a New Project’ and look for Blazor Server.

Select the project and provide a valid name for the solution and then choose the framework of your choice. Once the project is created, the folder structure looks like below.

Now, this is how a standard Blazor server-based application is created. To understand the data communication between server and client-side, open the developer tools from your browser and go to the Networks tab and reload the page.

If you notice, there would be blazor.server.js and server styles being present along with the SignalR communication. SignalR communication helps in data communication which happens in binary format. Each button click on the webpage adds additional network calls inside the messages tab under the SignalR communication, which indicates the pages are being requested and fetched from the server-side.

Implementing Blazor Web Assembly

Open Visual Studio 2019, and select Create a new project and look for Blazor Web assembly App.

And repeat step 2 from the previous section.

To understand the working of the Blazor Web Assembly, let’s run the application and open the networks tab from the browser’s developer tools.

If you notice, the blazor.webassembly.js files will be present with the dotnet.version.js file. This indicates that the web assembly is loaded.

And once you switch between the tabs, no communication happens between the server and client (unlike the Blazor Server through SignalR). Instead, only the required data will be fetched in JSON format.

Go to the fetch data tab, a network call with the weather.JSON file will be added immediately. Here, the data is being stored in a JSON file which is directly being pulled.


Both the hosting methods of Blazor have their own advantages and disadvantages. Go for Blazor Server if you have sensitive code that cannot be publicly exposed. On the other hand, go for Blazor web assembly if you are looking out to serve a large customer base.

Originally published at



Everything connected with Tech & Code. Follow to join our 1M+ monthly readers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Human Digital

The people first agency. Digitale oplossingen, professionals en trainingen waarin de mens altijd voorop staat |