Do you choose the right Blazor render mode?

Blazor (.NET 8+) offers multiple render modes, each with different performance characteristics and capabilities. Choosing the wrong render mode can lead to poor user experience, unnecessary server load, or missed opportunities for interactivity.

Understanding the strengths and trade-offs of each render mode helps you make informed architectural decisions. For comprehensive details, see Blazor render modes on Microsoft Learn.

The Blazor Render Modes

Static Server-Side Rendering (Static SSR)

Renders pages on the server and sends static HTML to the client. No interactivity after initial render.

Use when:

• Content is mostly static (blogs, documentation, marketing pages)
• SEO is critical
• You need the fastest initial page load
• No client-side interactivity is needed

✅ Benefits:

• Fastest initial load time
• Best SEO
• Minimal bandwidth usage
• No JavaScript download required

❌ Drawbacks:

• No interactivity without full page refresh
• Every interaction requires server round-trip

@page "/about"
@rendermode RenderMode.InteractiveServer

<h1>About Us</h1>
<p>This is a static page with no interactivity.</p>

❌ Figure: Bad example - Using InteractiveServer for a static page wastes server resources

@page "/about"

<h1>About Us</h1>
<p>This is a static page with no interactivity.</p>

✅ Figure: Good example - Static SSR (default) is perfect for content-only pages

Interactive Server

Maintains a SignalR connection to the server. UI updates are sent over the connection in real-time.

Use when:

• You need interactivity
• You want to avoid large client downloads
• Your app needs server-side resources (database, files)
• Users have reliable internet connections

✅ Benefits:

• Small initial download
• Fast time-to-interactive
• Direct access to server resources
• Code stays on the server (more secure)

❌ Drawbacks:

• Requires persistent connection
• Server memory used per user
• Latency on every interaction
• Doesn't work offline

@page "/counter"
@rendermode InteractiveServer

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

✅ Figure: Good example - Interactive Server for real-time features

Interactive WebAssembly

Runs entirely in the browser using WebAssembly. No server connection needed after initial load.

Use when:

• Users may have unreliable connections
• You want offline capability
• Minimizing server load is important
• You don't need direct server resource access

✅ Benefits:

• Works offline
• No server load for interactivity
• No latency after initial load
• Rich client-side experience

❌ Drawbacks:

• Large initial download (~2-3 MB)
• Slower initial load
• Limited to browser capabilities
• Cannot directly access server resources

@page "/game"
@rendermode InteractiveWebAssembly

<h1>Browser-Based Game</h1>
<p>Score: @score</p>
<button @onclick="Play">Play</button>

@code {
    private int score = 0;

    private void Play()
    {
        // Runs entirely in browser
        score += Random.Shared.Next(1, 10);
    }
}

✅ Figure: Good example - WebAssembly for offline-capable or compute-intensive UI

Interactive Auto

Starts with Interactive Server, then upgrades to WebAssembly on subsequent visits (after downloading).

Use when:

• You want the best of both worlds
• First-time performance matters
• Users will return to your app
• You need both fast initial load AND offline capability

✅ Benefits:

• Fast first visit (Server mode)
• Offline on return visits (WASM mode)
• Best overall user experience
• Automatic optimization

❌ Drawbacks:

• More complex deployment
• Requires both server and WASM hosting
• Background WASM download on first visit

@page "/dashboard"
@rendermode InteractiveAuto

<h1>Dashboard</h1>
<Chart Data="@chartData" />

@code {
    private ChartData? chartData;

    protected override async Task OnInitializedAsync()
    {
        chartData = await LoadDataAsync();
    }
}

✅ Figure: Good example - Auto mode for progressive web apps

Per-Component Configuration

You can mix render modes within the same application:

@* Static page with interactive components *@
@page "/products"

<h1>Our Products</h1>

@* Static product list *@
<ProductList />

@* Interactive search *@
<ProductSearch @rendermode="InteractiveServer" />

@* Interactive shopping cart *@
<ShoppingCart @rendermode="InteractiveWebAssembly" />

✅ Figure: Good example - Using the right render mode for each component