🌊

Streaming Rendering

Progressive page loading for optimal user experience

🌊 Streaming

This Page Uses Streaming

This documentation page demonstrates Streaming rendering with progressive content delivery

What is Streaming Rendering?

Streaming rendering in Blazor allows pages to load progressively, sending content to the browser as it becomes available. The initial page structure loads instantly, while slower data operations stream in later, providing an excellent perceived performance experience.

🚀

Instant UI

Page structure loads immediately, data streams in progressively

📊

Better UX

Users see content loading rather than blank screens

⚡

Parallel Loading

Multiple data sources can load concurrently

How Streaming Rendering Works

Initial Response

Server sends basic page HTML with loading placeholders immediately

Parallel Processing

Server processes multiple async operations concurrently (API calls, database queries)

Progressive Updates

As each operation completes, content streams to browser and updates placeholders

Final State

All content loaded, page fully interactive with complete data

🌊 Streaming Process Visualization

T+0ms: Initial HTML with skeleton UI

T+50ms: Fast data (cache) streams in

T+200ms: Database queries complete

T+500ms: External API calls finish

Streaming Examples in This App

Recipe Detail Page

Streaming SSR

Recipe details load progressively: basic info first, then ingredients, instructions, and related recipes.

Streaming Sections:

• Recipe title and image (instant)
• Ingredients list (database query)
• Cooking instructions (formatted content)
• Related recipes (recommendation API)

View Streaming Recipe

Dashboard Widgets

Streaming SSR

Homepage dashboard loads each widget independently as data becomes available.

Progressive Widgets:

• Recipe count (fast cache lookup)
• Popular categories (aggregation query)
• Recent additions (sorted database query)
• User statistics (analytics API)

Experience Streaming Dashboard

Streaming Implementation Pattern

// Streaming Rendering Component

@page "/streaming-example"

@inject HttpClient Http

@inject DatabaseService Database

<div>

@ //Instant content loads first

<h1>@pageTitle</h1>

@if (fastData == null)

{

<div class="loading">Loading...</div>

}

else

{

<div>@fastData.Content</div>

}

</div>

@if (slowData == null)

{

<div class="loading">Loading external data...</div>

}

else

{

<div>@slowData.Results</div>

}

</div>

@code {

private string pageTitle = "My Dashboard"; // Available instantly

private FastDataModel? fastData;

private SlowDataModel? slowData;

protected override async Task OnInitializedAsync()

{

// Start multiple operations concurrently

var fastTask = LoadFastDataAsync();

var slowTask = LoadSlowDataAsync();

// Process as each completes

fastData = await fastTask; // Streams first

StateHasChanged(); // Updates UI incrementally

slowData = await slowTask; // Streams later

StateHasChanged(); // Final UI update

}

private async Task<FastDataModel> LoadFastDataAsync()

{

// Fast operations: cache, memory, simple queries

await Task.Delay(50); // Simulate fast operation

return await Database.GetCachedDataAsync();

}

private async Task<SlowDataModel> LoadSlowDataAsync()

{

// Slow operations: external APIs, complex queries

return await Http.GetFromJsonAsync<SlowDataModel>("/api/slow");

}

🌊 Streaming Key Points:

Progressive Enhancement: Start with skeleton UI, fill in content as available
Concurrent Operations: Use Task.Run or parallel async calls for independent data
StateHasChanged(): Trigger UI updates as each data piece arrives
Loading States: Provide visual feedback for pending operations

Advanced Streaming Patterns

Prioritized Loading

🎯 Content Priority

Load critical content first, then enhance with secondary data.

// Priority 1: Core content (instant)
// Priority 2: Enhanced data (100ms)
// Priority 3: Related content (500ms)

📊 Data Chunking

Break large datasets into smaller chunks for progressive loading.

// Load 20 items initially
// Stream additional batches
// Infinite scroll pattern

Error Handling

🛡️ Graceful Degradation

Show partial content even if some streams fail.

try { await slowOperation; }
catch { showFallbackContent = true; }
StateHasChanged();

⏱️ Timeout Handling

Set timeouts for streaming operations to prevent infinite loading.

using var cts = new CancellationTokenSource();
cts.CancelAfter(TimeSpan.FromSeconds(30));
await operation(cts.Token);

When to Use Streaming Rendering

✅ Perfect For

• Dashboard pages - Multiple independent data sources
• Detail pages - Core content + related/recommended items
• Mixed data sources - Fast cache + slow API combinations
• External dependencies - Third-party API integrations
• Large datasets - Progressive loading of extensive content

❌ Not Ideal For

• Simple static pages - Overhead not justified for basic content
• Fast uniform data - All data loads quickly from single source
• Critical dependencies - Core functionality requires all data
• Mobile-first design - Bandwidth concerns with multiple streams

Streaming Performance Benefits

60%

Faster perceived load time for complex pages

Better user engagement with progressive content

40%

Reduction in perceived waiting time

🚀 Streaming Best Practices

Skeleton screens: Provide visual structure while content loads
Priority ordering: Load most important content first
Parallel processing: Run independent operations concurrently
Graceful fallbacks: Handle failures without breaking the page

Progress indicators: Show loading progress for longer operations
Timeout handling: Prevent infinite loading states
Caching strategy: Cache fast-loading components appropriately
Performance monitoring: Track streaming metrics and user experience

Previous: Interactive Server

See Streaming in Action Back to Overview