Featured image of post Blazor In a Nutshell

Blazor In a Nutshell

A Brief History of Blazor

Blazor started as an experimental project by Microsoft, and when people saw it actually worked, Microsoft was like, “Well, guess we gotta support this now!” Since then, it has evolved into a full-fledged framework with different hosting models:

  • Blazor WebAssembly (WASM): Runs completely in the browser using WebAssembly. No need for a server-side connection—just load the app and go!
  • Blazor Server: Renders everything on the server and sends updates to the client over SignalR. It’s fast and great for real-time apps, but requires a constant connection.
  • Blazor Hybrid: Use Blazor inside desktop and mobile apps with .NET MAUI or Electron. C# everywhere, baby!

Now that Blazor has matured, let’s look at some of the shiny new features that make it even more awesome.

New Features in Blazor

1. Blazor United (Blazor Server + WASM = ❤️)

One of the biggest new features in Blazor is Blazor United, which allows developers to mix and match Blazor Server and Blazor WASM in the same app.

Want some components to load instantly using Blazor Server but others to be client-side for offline support? Now you can!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@page "/weather"

@if (IsWasmSupported)
{
    <WeatherWidgetWasm />
}
else
{
    <WeatherWidgetServer />
}

2. Rendering Improvements (Faster Blazor, Less Waiting)

Blazor’s rendering engine got some serious gains, like it’s been hitting the gym. Microsoft optimized the diffing algorithm, reducing unnecessary DOM updates and improving interactivity.

1
2
3
4
5
6
7
8
@code {
    private List<string> items = new();

    protected override void OnInitialized()
    {
        items = Enumerable.Range(1, 100).Select(i => $"Item {i}").ToList();
    }
}

3. Streaming Rendering (Because Nobody Likes Waiting)

With Streaming Rendering, Blazor can now send partial page updates as the content becomes available, improving perceived load times.

1
2
3
4
5
@page "/news"

<StreamRender>
    <NewsFeed />
</StreamRender>

This means users don’t have to stare at a blank screen while waiting for data to load. Instead, they get content as soon as it’s ready!

4. Enhanced JavaScript Interop (Yes, We Still Need JS Sometimes)

Look, we tried to get rid of JavaScript, but sometimes we still need it. The good news? JavaScript interop in Blazor is now smoother than ever.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<button @onclick="ShowAlert">Click me!</button>

@code {
    [Inject] IJSRuntime JS { get; set; }

    private async Task ShowAlert()
    {
        await JS.InvokeVoidAsync("alert", "Hello from Blazor!");
    }
}

5. Auto-Reconnect for Blazor Server

Ever had a Blazor Server app lose connection and just… die? Well, not anymore! Blazor now includes automatic reconnection, so if the network blips, your app will try to reconnect on its own.

1
2
3
<CircuitHandler>
    <h3>Reconnecting...</h3>
</CircuitHandler>

The Future of Blazor

Blazor is evolving rapidly, and Microsoft has big plans. Some of the upcoming features include:

  • AOT Compilation for WebAssembly: Even faster Blazor WASM apps!
  • Better Mobile Support: Blazor + .NET MAUI = ❤️
  • More Interop with JavaScript Frameworks: If you can’t beat them, integrate with them.
  • Server-Side Rendering (SSR) with Blazor Components: Because why not borrow a good idea from React?

Key Ideas

ConceptSummary
Blazor WebAssemblyRuns in the browser using WebAssembly
Blazor ServerUses SignalR to render UI from the server
Blazor UnitedMixes Server & WASM for best performance
Streaming RenderingSends content progressively for faster UX
Enhanced JS InteropBetter ways to call JS from Blazor
Auto-ReconnectBlazor Server can now recover from outages
Future of BlazorFaster, better, and more features incoming

References