Blazor

alt text

I’m very excited about Blazor, especially the WebAssembly mode. Scott Allen has a good write up.

After exploring for a while, as I’m starting a greenfield applications now, I’ve decided it is still too early to adopt.

What is Blazor

Blazor Documentation Introduction

My previous article on Default Starting point for a web app is good to see Scott Hanselman putting a sample app together.

Componenets

Blazor apps are based on components usually written as a .razor file. Razor is a syntax for combining HTML and C#.

// Components/Counter.razor
@using Microsoft.AspNetCore.Components.Web

// One way data binding 
<p>Current count: @currentCount</p>

<button @onclick="IncrementCount">Click me</button>

@code {
    // Private field - encapsulate a property with a private setter? 
    int currentCount; 
    // Function that increments the field
    void IncrementCount() => currentCount++;
}

I find it easier to start with a Razor pages project then add in Blazor support:

// Startup.cs
// in ConfigureServices
services.AddServerSideBlazor();
// in Configure, app.UseEndpoints
endpoints.MapBlazorHub();

then wire in a Blazor Component into the page you need it

// index.html
// add into the page
// notice that <Counter> is linked via the filename Counter.razor
@(await Html.RenderComponentAsync<Counter>(RenderMode.ServerPrerendered))
<script src="_framework/blazor.server.js"></script>

RenderMode

Notice here that I’m using ServerPrerendered. This is used to prerender a site for SEO or even just to present a better experience for the user.

SQL-MisterMagoo gives an explanation:

Server = the index is sent to the client, then the SignalR connection is made, and when the connection becomes active, the components are rendered and sent to the client (the user sees and can interact with your components)
ServerPrerendered is for mainly, but not exclusively for SEO - the current layout is rendered server side and sent to the client in the initial Response - it is “Static” content - the user does not yet have a connection to the “Blazor” server - there is no SignalR connection yet, but there will be one soon. Once the connection is Active, the client is updated with a new render of the components which is interactive.jk