Introduction to Blazor WebAssembly Projects
In our previous article "Introduction to Blazor Server Projects", we discussed Blazor Server projects. Today, we discuss Blazor WebAssembly projects.
Unlike Blazor Server projects, Blazor WebAssembly projects run inside a web browser using WebAssembly, which is mono runtime (written in “C” language). Blazor WebAssembly project also creates a render tree, and all razor pages run on the browser instead of the server.
In Blazor Server projects, we use SignalR to communicate between the server and the browser. Blazor WebAssembly updates DOM with direct JavaScript interop. The Blazor WebAssembly project page contains a small piece of JavaScript that loads mono runtime compiled into WebAssembly, called dotnet.wasm. This wasm or WebAssembly downloads the blazor.boot.json file, which contains all the files the application needs to run and the application entry point. Also, dotnet.wasm is the mono runtime compiled into WebAssembly, which runs .Net dlls on the browser.
When the Blazor WebAssembly project runs, it loads all required files into a single file, and the size of this file will be about 1.3 MB. This file must be downloaded to the browser for the Blazor WebAssembly application. Even though the size of the Blazor WebAssembly file loaded on the browser is large, WebAssembly runs faster than regular Javascript.
Advantages:
- The Blazor WebAssembly application does not require maintaining the connection with the server, unlike the Blazo Server application.
- For any user action, no round trip to the server is required as all required code is downloaded to the browser.
- All code downloaded to the browser, Blazor WebAssembly application is significantly faster than Blazor Server projects.
- Since the Blazor WebAssembly application code runs on the browser, we can host the Blazor WebAssembly project on any server regardless of whether it is .Net compatible.
Disadvantages:
- In Blazor WebAssembly projects, to connect to a database, we need to have a WebAPI, and it should get called from WebAssembly code, which loads on the browser
- The size of the Blazor WebAssembly project file is larger compared to other sites, and many files need to be downloaded to the browser.
