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.
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.
- 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
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.
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