Blazor Server vs Blazor Web Assembly

BLAZOR SERVER VS. BLAZOR WEB ASSEMBLY

4 min Jan 04, 2022 Manish Kumar WEB Views : 3710
If you constantly keep up with the developments of .NET, you might have heard of something called Blazor. But what is Blazor? Why is it so popular? Well, let’s paint a picture to understand its significance. 

Javascript plays a big role in achieving client-side activities for web development. By modifying the Document Object Model (DOM), you can save a lot of backend calls. A direct result of this would be building functionalities effortlessly. Now that advanced versions of javascript-based UI frameworks (view, angular, react, etc.) have arrived, they have started using typescripts. 

So if you want your client-side functionalities to perform well, you must learn Javascript. But there is a catch here. The version of Javascript you might have to learn completely depends upon the UI framework. It is where Microsoft comes to our rescue. They released an open-source web framework called Blazor with the simple aim of reducing our dependence on Javascript. 

The previously achievable functionalities through Javascript can now easily be achieved through the Blazor framework. Now you can code enriched web UI/UX experiences via CSS, C#, and HTML without fret about Javascript. Now that you are caught up on the history, it is time to delve into what Blazor is and how it can make achieving client-side activities for web development much more effortless.

What Is Blazor?

Blazor is a free, open-source web framework that enables developers to code highly interactive web applications on C# easily. You can now build applications C# and the .NET libraries on the client-side without relying on Javascript. The .NET runtime is compiled into WebAssembly byte code. Once that is done, the .NET runtime functions into the browser, allowing all .NET DLLs to execute. This also includes all the code you have written in C#. Blazor can be hosted in two ways, 

  1. Blazor WebAssembly
  2. Blazor server 

What is Blazor Server?

Released with the .NET core version 3.0, the Blazor server is a hosting model that allows an application to be executed on the server itself. It makes use of ASP.NET core, which aids in integrating server-side functionality. It establishes a connection between the client-side browser and the server-side by using SignalR. When any interaction occurs from the client end, the SignalR passes the information over to the server. The page is now updated. 

Blazor Server

If there is any further communication from the client-side, only the difference in HTML is sent over the SignalR server by the server, updating the user interface once the client receives it. This ends up being a seamless and highly responsive experience for the user. 

AN OVERVIEW OF BLAZOR SERVER: PROS & CONS 

The pros of the Blazor server are as follows:

  1. Since the users do not download the entire application libraries and only the difference in HTML, application loading is extremely fast. 
  2. Isolation of backend code since the C# files are not being sent over to the client-side.
  3. Backward compatibility with older versions of the browsers as well.

The cons of the Blazor server are as follows:

  1. Since the entire process is online and files are being sent over to the client-side from the server, network instabilities can be a massive problem. 
  2. Since new WebSockets are created every time a new connection is formed, scalability is in the grey area as memory consumption will be significantly higher. 

What’s Blazor Web assembly?

Released in May 2020, the Blazor WebAssembly is the second hosting model by Blazor. A .NET runtime is integrated into WebAssembly. This offers standardized bytecode throughout web applications. This .NET runtime is downloaded alongside Blazor WebAssembly, enabling the execution of normal .NET code into the browser. Once this is up and running from the client-side, there is no need for SignalR or any other extra plugin to maintain a connection between the server and the client. 

Blazor Web Assembly


Although, server-side applications cannot be integrated with Blazor WebAssembly. Also, it required a web API for communication and the exchange of data. 

AN OVERVIEW OF PROS & CONS

The pros of Blazor WebAssembly are as follows:

  1. Since all the content of the web Blazor WebAssembly:site is being downloaded on the client-side, the UI 
  2. Reacts extremely fast to any interaction or user requests post the initial loading time. 
  3. Offline support is available: The only drawback of Blazer WebAssembly is the very high initial loading time.

Implementation of Blazor Server

Here are the steps to successfully implement Blazor Server

  1. Once you open Visual studio 2019, create a new project and look for a Blazor server
  2. When selecting the project, give an authentic name to the solution and choose a framework from the list.
  3. To obtain a clearer understanding of the data communication between the client and the server, look for developer tools in your browser. 
  4. Now, head to the networks tab and reload the page. 
  5. You will now find blazor.server.js and server styles present along with the SignalR communication. SignalR communication pushes data communication in binary format. 
  6. Every time you click a button on the Webpage, supplementary network calls are added in the messages tab under SignalR communication. 
  7. This shows that the pages are requested and fetched from the server side.

Implementation OF Blazor Web Assembly

Here are the steps for the successful implementation of Blazo WebAssembly:

  1. Once you open Visual studio 2019, create a new project and look for the Blazor WebAssembly application.

  2. When selecting the project, give an authentic name to the solution and choose a framework from the list.

  3. To obtain a clearer understanding of the working of the Blazor Web Assembly, look for developer tools in your browser.

  4. Here, you will find blazor.webassembly.js files and the dotnet.version.js file. This signals that the web assembly is loaded. 

  5. Now try switching between tabs. You will notice no communication between the server and the client. Just the data required is fetched in JSON format. 

  6. After this, head to the fetch data tab. a network call, and the weather.JSON file will be displayed immediately. 

  7. The data is now stored in a JSON file, which is being pulled directly.

How Do Blazor Server and Blazor Web assembly Differ From Each Other?

Now that you understand the differences between a Blazor server and Blazor WebAssembly, it is time to ask the most important question in this scenario. Which hosting service to use while creating a Blazor application?

It all depends on the objective and features of the application you want to create using Blazor. If you want to create a standard application from an area with an unstable internet connection, then Blazor WebAssembly is the obvious choice. The simple reason behind this is that you can carry on app development even without a server connection. 

But if you have a strong internet connection at all times and have no issue connecting to a server, then going with the Blazor server would be a wise choice. 

Bottom Line

Both the Blazor hosting services have their own set of pros and cons. Based on your needs and expectations, it is up to you to decide what hosting service you want to go with. For example, if you don’t want to expose your code to the public because it contains sensitive information, go ahead with a Blazor WebAssembly approach. But if you want to spread your application to the masses and attract a massive customer base, Blazor server is the way to go.