In previous article, you already know what is Blazor, Blazor WebAssembly and Blazor Server, there’s a different article regarding Blazor WebAssembly as well. As far as I can see, writing code is the same whether you use Blazor WebAssembly or Blazor Server. However, there are some differences in the way the projects are structured and run. We’re going to look into Blazor Server a little bit more today.
Project structure
Let’s start by using Visual Studio to create a new Blazor Server project. There are a few minor differences when compared to Blazor WebAssembly.
- There is no index.html file, instead, we have _Host.cshtml. It is recommended to include additional javascript or CSS files here.
- Blazor Server doesn’t offer offline support, hence service-worker.js isn’t available.
- appsettings.json: you can keep the settings for your app here, just like with the standard ASP.NET app.
Run Blazor Server on browser
Open Chrome’s dev tools and select the Network tab when your browser requests the app for the first time. There are only a few CSS and JavaScript files, no dll, and no dotnet.wasm, just like other types of web apps (ASP.NET, Angular, React)
You are able to see the web socket connection with the name /_blazor?id={…}. Most of user interaction with the UI will be sent to the server via this web socket. The result will be returned to the browser by the server after processing your C# code and determining whether any UI elements require re-rendering. Javascript will make the necessary DOM changes to re-render the UI.
Render mode
Check out this line of code in the file _Host.cshtml: we have a few render-mode scenarios for the Blazor server: Static, Server and ServerPrerendered
“Static” mode: renders the component into static HTML, disabling user interaction with the UI. Let’s look at the Counter.razor page as an example. You expect that when you click the “Click me” button, the “IncrementCount” function will be running and the “Current count” will increase by one. However, nothing happens in “Static” mode, all that is displayed is a static HTML page, no code is executed.
“Server” and “ServerPrerendered” mode: let’s look at the FetchData.razor page as an example. We may observe the differences by running this page in the 2 modes, right click on browser, select “View page source”. The “page source” image below shows “Server” mode on the left and “ServerPrerendered” on the right. Similar to Angular/React, “Server” mode displays a blank page, rendering of the content will occur later. “ServerPrerendered” mode renders content on the server, like an ASP.NET MVC application.
For search engines like Google and Bing to index your page (SEO), ServerPrerendered mode is recommended. However, this is a bit trade-off: Blazor pre-renders page and sends it as a static page, then later the page becomes an interactive Blazor server app. It means the server must process twice. This only occurs when you reload the page or the first page when you come to the app. So, in my view it is acceptable.
To test this scenario, let’s now add some delay code to the Counter.razor page. You need to select to “Start without debugging” your project in Visual Studio, then navigate to the Counter page and press F5 to refresh the page. At first, it serves you a static HTML page, in the first 3 seconds, if you click on “Click me” button, nothing happens. The interactive page arrives over web socket in 3 seconds, you can’t observe any difference, but the UI now changes when you click the “Click me” button. As previously mentioned, this does not occur if you navigate from another page to the Counter page.
Blazor United
Determining whether to use Blazor Server or Blazor WebAssembly can be challenging at times. Understanding this challenge, MicroSoft is putting a lot of effort on Blazor to create a “Full stack web” with .NET 8. They currently refer to it as “Blazor United”. You don’t need to worry about which one will fit you the best. You can use Blazor WebAssembly on some pages and Blazor Server on others while using Blazor United. Here’re some demonstrations of Blazor with the new features in .NET 8 here:
Materials used in this article
- Window 10
- Visual Studio 2022 (64-bit) – Version 17.5.5
- .NET 7
