Blazor Server vs. Blazor Web Assembly
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
What is Blazor?
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.
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.