⚡

Interactive Server Rendering

Real-time, interactive components powered by SignalR

⚡ Interactive Server

This Page Uses Interactive Server

This documentation page demonstrates Interactive Server rendering capabilities

Learn Interactive Server MS Docs SignalR Guide

What is Interactive Server Rendering?

Interactive Server rendering in Blazor creates a persistent SignalR connection between the browser and server. This enables real-time UI updates, server-side event handling, and full C# interactivity while maintaining server-side execution and state management.

🔄

Real-time Updates

Instant UI changes via SignalR connection without page refreshes

🛡️

Server-side Security

All logic runs on server, protecting sensitive operations

🎯

Full C# Power

Access to entire .NET ecosystem and server resources

How Interactive Server Works

Initial SSR Load

Page loads with server-side rendered HTML for fast initial display

SignalR Connection

Browser establishes persistent WebSocket connection to server

Interactive Mode

User interactions trigger server-side C# methods via SignalR

UI Updates

Server sends DOM updates back to browser for instant visual changes

🔌 SignalR Connection Details

Connection Features:

• Automatic reconnection on network issues
• Fallback to long polling if WebSockets unavailable
• Circuit breaker pattern for reliability
• Connection state monitoring

Performance Optimizations:

• Differential DOM updates (only changed elements)
• Batched UI updates for efficiency
• Compressed SignalR messages
• Connection pooling on server

Interactive Server Examples in This App

Recipe Search

Interactive Server

Real-time recipe search with instant results as you type, powered by server-side filtering.

Interactive Features:

• Live search without page refresh
• Server-side data filtering and sorting
• Instant UI updates via SignalR
• Debounced input handling

Try Interactive Search

Recipe Counter

Interactive Server

Real-time counter showing total recipes across all categories with live updates.

Interactive Features:

• Auto-updating statistics
• Server-pushed updates
• Real-time data synchronization
• Cross-user state sharing

View Live Counter

Interactive Server Implementation

// Interactive Server Component Pattern

@page "/interactive-example"

@rendermode InteractiveServer

@inject YourService Service

<div>

<button @onclick="HandleClick">Process</button>

@foreach (var result in filteredResults)

{

<div>@result.Name</div>

}

</div>

@code {

private string searchTerm = "";

private List<Item> allItems = new();

private List<Item> filteredResults = new();

protected override async Task OnInitializedAsync()

{

allItems = await Service.GetItemsAsync();

filteredResults = allItems;

}

private string SearchTerm

{

get => searchTerm;

set

{

searchTerm = value;

// This updates UI instantly via SignalR

FilterResults();

}

private async Task HandleClick()

{

// Server-side processing with UI feedback

await ProcessDataAsync();

StateHasChanged(); // Updates UI via SignalR

}

private void FilterResults() =>

filteredResults = allItems.Where(i => i.Name.Contains(searchTerm)).ToList();

}

🎯 Interactive Server Key Points:

@rendermode InteractiveServer: Enables SignalR connection for this component
@bind with events: Real-time data binding triggers server-side updates
StateHasChanged(): Manually trigger UI updates when needed
Server execution: All C# code runs on server, DOM updates sent via SignalR

Advanced Interactive Server Features

Real-time Capabilities

🔄 Live Data Synchronization

Multiple users can see updates instantly across all connected sessions.

// Enable live updates across users
await Clients.All.SendAsync("UpdateData", newData);

⚡ Event Handling

Rich event system with keyboard, mouse, and custom events.

@onkeypress="HandleKeyPress"
@onmouseover="HandleMouseOver"
@onclick="HandleCustomAction"

State Management

🗄️ Server-side State

Component state lives on server, shared across requests.

// State persists on server
private List<Item> sessionData;
// Survives page navigation

🔒 Secure Operations

Sensitive logic runs server-side, protected from client tampering.

// Server-side validation
if (!User.IsInRole("Admin"))
return;

When to Use Interactive Server

✅ Perfect For

• Interactive forms - Real-time validation and user feedback
• Live dashboards - Real-time charts and data visualization
• Search interfaces - Instant search results and filtering
• Collaborative tools - Multi-user editing and sharing
• Admin panels - Secure, server-side business logic

❌ Consider Alternatives For

• High-latency connections - SignalR requires stable connection
• Mobile offline scenarios - No offline capability
• Simple static content - Overhead not justified
• High-scale public sites - Each connection uses server resources

Performance Considerations

~5KB

SignalR connection overhead per user

~50ms

Typical round-trip latency for interactions

1000+

Concurrent connections per server (with optimization)

⚡ Performance Optimization Tips

Debounce user input: Avoid excessive server calls on every keystroke
Optimize renders: Use ShouldRender() to control component updates
Batch operations: Group multiple state changes together
Connection monitoring: Handle reconnection gracefully

Memory management: Dispose of resources properly in components
Circuit limits: Configure appropriate timeouts and limits
Load balancing: Use sticky sessions for SignalR connections
Monitoring: Track connection health and performance metrics

Previous: SSR

Try Interactive Examples Next: Streaming Rendering