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?
- What is Blazor Server?
- Pros and cons of Blazor Server
- Pros and cons of Blazor Web Assembly
- Implementing Blazor Server
- Implementing Blazor Web Assembly
- Conclusion
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 -
- Application is loaded and rendered in a quick time as users do not download application libraries.
- The backend code is isolated as the C# files are not being sent to the client-side.
- It supports and works in older versions of browsers as well.
Here are some of the disadvantages of using Blazor Server -
- As the pages are being sent from the server to the client-side, whenever there are network instabilities, offline support will be a problem.
- As the application creates new WebSockets for each connection, scalability will be challenging as the amount of memory consumed will be huge.
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 -
- After the initial load, the UI reacts faster to user requests (except external API calls), as the entire content of the website is being downloaded on the client-side.
- Since the application is downloaded on the client-side, offline support is possible in case of network issues.
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.
Conclusion
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.