blazor

Blazor Framework - Quick Reference (SKILL.md)

Version: 1.0.0 Target: .NET 8.0+ with Blazor Server/WebAssembly UI Library: Microsoft Fluent UI Blazor Components Purpose: Fast lookup for common Blazor patterns and best practices

---

1. Blazor Hosting Models

Blazor Server

Characteristics:

• Server-side rendering with SignalR connection
• Stateful connection to server required
• Small initial download (~2MB), fast startup
• UI events sent to server via SignalR

Setup:

// Program.cs
builder.Services.AddServerSideBlazor();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

Use Cases: Internal apps, intranet, enterprise applications

---

Blazor WebAssembly

Characteristics:

• Client-side execution in browser via WebAssembly
• Full .NET runtime in browser
• Larger initial download (~10MB), but offline capable
• No server connection after initial load

Setup:

// Program.cs (Client)
builder.Services.AddBlazorWebAssembly();
await builder.Build().RunAsync();

Use Cases: Public-facing apps, PWAs, offline-first applications

---

Render Modes (.NET 8+)

@* Server-side with SignalR *@
@rendermode InteractiveServer

@* Client-side WebAssembly *@
@rendermode InteractiveWebAssembly

@* Auto: Server initially, then WebAssembly after download *@
@rendermode InteractiveAuto

@* Static: Server-side rendering without interactivity *@
@rendermode @(new Microsoft.AspNetCore.Components.Web.RenderMode.Static)

---

2. Component Architecture

Basic Component Structure

@page "/counter"
@using MyApp.Services

<h3>@Title</h3>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    [Parameter]
    public string Title { get; set; } = "Counter";

    [Parameter]
    public EventCallback<int> OnCountChanged { get; set; }

    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;
        await OnCountChanged.InvokeAsync(currentCount);
    }
}