Blazor Server vs. Blazor Web Assembly

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. 

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, 

• Blazor WebAssembly
• Blazor server 

What’s 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. 

What’s Blazor WebAssembly?

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. 

Implementation of Blazor Server

Here are the steps to successfully implement Blazor Server: 

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

Implementation of Blazor WebAssembly

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

• Once you open Visual studio 2019, create a new project and look for the Blazor WebAssembly application.
• When selecting the project, give an authentic name to the solution and choose a framework from the list.
• To obtain a clearer understanding of the working of the Blazor Web Assembly, look for developer tools in your browser.
• Here, you will find blazor.webassembly.js files and the dotnet.version.js file. This signals that the web assembly is loaded. 
• 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. 
• After this, head to the fetch data tab. a network call, and the weather.JSON file will be displayed immediately. 
• The data is now stored in a JSON file, which is being pulled directly. 

How do Blazor Server and Blazor WebAssembly 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.

Source: https://www.zenesys.com/blog/blazor-server-vs-blazor-web-assembly