In this article, I want to compare two Blazor Project Templates: Blazor WebAssembly and Blazor Server. I will create two identical projects but with different Blazor templates. And explain the difference.
What is Blazor?
Blazor is a .Net UI Framework for building interactive applications that can run both server-side and client-side. Using the experience of Angular, React and Vue, Microsoft developers decided to create Blazor. Javascript is the main language in the first frameworks, and C# is the default language in Blazor. Component development of web interfaces is also taken as a basis.
Currently, there are two project templates available: Blazor Server App and Blazor WebAssembly App.
Blazor WebAssembly
When you run a Blazor WebAssembly App, the C# and Razor code files are compiled into .NET assemblies. Blazor WebAssembly loads the .NET runtime, assemblies, and their dependencies, and configures the .NET runtime to run the assemblies. Blazor WebAssembly optimizes the assembly loaded into the browser. When an application is published, unused code is removed and downloaded assemblies are cached in the browser.
WebAssembly Project Structure
Folder structure and Program.cs file:
WebAssembly Pros and Cons
- Application is very fast
- Application can work in offline mode
- Serverless deployment is possible
- Application can run in modern browsers without additional plugins
- Any .NET standard 2.0 C# can be run
- Requires modern browsers(with WebAssembly support)
- Long initial load time
- Debugging a bit limited
Blazor WebAssembly – Loaded Assemblies
Here is the result of the first request to the WASM. You can notice application downloads the CLR, Assemblies, JavaScript, CSS. Thus it can work in offline mode, without the server.
Blazor Server
In the Blazor Server Application, the main part of the project runs on the server side. Interaction with the user interface, working with events, and even JavaScript calls on the client side are carried out according to the client-server model through SignalR.
Since the main part of the application is on the server side, all files downloaded by the client are much smaller compared to Blazor WebAssembly. The application is not limited to the browser and can take advantage of server-side processing capabilities. In addition, the application may work with legacy browsers that do not support WebAssembly.
Blazor Server – Project Structure
Folder structure and Program.cs file:
Blazor Server – Interaction with Server
Every interaction with the application is sent to the server via WebSocket. Connection established with the wss-URL similar to wss://localhost:7141/_blazor?id=SXhvzk7nankLO-QOZNzw8A and you can check them in the Network Tab -> WS(Websockets):
Blazor Server Pros and Cons
- Application size is small
- Application loads faster
- Full debugging support
- Older browsers are supported Complete .NET API compatibilityApp Code Securely
- Application should keep connection with server
- Scalability depends on server capabilities
- Serverless deployment isn’t possible
What to choose?
If you want to manage a large number of users and don’t have secret code running, use Blazor Webassembly. Use Blazor Server if you need first page speed load and if you have sensitive code that you don’t want to send to the browser.
