🖥️

Server-Side Rendering (SSR)

Fast, SEO-friendly pages rendered on the server

🖥️ SSR

This Page Uses SSR

This documentation page demonstrates Server-Side Rendering in action

What is Server-Side Rendering?

Server-Side Rendering (SSR) in Blazor generates complete HTML on the server before sending it to the browser. This provides fast initial page loads, excellent SEO, and works well for content-heavy pages that don't require interactivity.

⚡

Fast Initial Load

Complete HTML delivered immediately, no client-side rendering delays

🔍

SEO Optimized

Search engines can crawl and index content immediately

💻

Low Client Load

Minimal JavaScript, works on low-powered devices

How SSR Works in Blazor

Request Arrives

Browser requests a page (e.g., /categories)

Server Processing

Blazor server executes C# code, loads data, and renders the complete HTML

HTML Response

Complete, rendered HTML is sent to the browser - no client-side rendering needed

SSR Examples in This App

Categories Page

SSR

The categories page loads all recipe categories on the server and renders complete HTML.

Key Features:

• Data loaded during OnInitializedAsync()
• No SignalR connection required
• Complete HTML sent to browser
• SEO-friendly content indexing

View Categories Page

Home Page

SSR

The home page calculates statistics and featured recipes server-side for immediate display.

Key Features:

• Server-side data aggregation
• Pre-calculated statistics
• Featured recipes selection
• Fast perceived performance

View Home Page

SSR Implementation Pattern

// Basic SSR Pattern in Blazor

@page "/your-page"

@inject YourService Service

<div>

@if (isLoading)

{

<p>Loading...</p>

}

else

{

@foreach (var item in items)

{

}

</div>

@code {

private List<Item> items = new();

private bool isLoading = true;

protected override async Task OnInitializedAsync()

{

// This runs on SERVER during SSR

items = await Service.GetItemsAsync();

isLoading = false;

}

🔍 SSR Key Points:

OnInitializedAsync(): Executes on server, data ready before HTML generation
No rendermode directive: Default behavior is server-side rendering
Complete HTML: Browser receives fully rendered content immediately
SEO Ready: Search engines can index all content without JavaScript

When to Use SSR

✅ Perfect For

• Landing pages - Fast load times crucial for conversions
• Content pages - Blogs, articles, documentation
• Product listings - E-commerce category and product pages
• SEO critical pages - Need immediate search engine indexing
• Mobile-first - Works great on slow connections

❌ Not Ideal For

• Interactive dashboards - Need real-time updates
• Forms with validation - Better with server interactivity
• Real-time features - Chat, live updates, collaborative editing
• Complex state management - Multi-step wizards, shopping carts

Performance Benefits

< 100ms

Initial page load time for static content

0 JS

Required for basic functionality

100%

SEO coverage for all content

🎯 SSR Best Practices

Optimize data queries: Load only necessary data during OnInitializedAsync
Cache frequently used data: Implement server-side caching for better performance
Minimize external calls: Reduce API calls that slow down server rendering

Use async patterns: Leverage async/await for non-blocking operations
Implement error boundaries: Handle failures gracefully during SSR
Monitor server load: SSR can be CPU intensive for complex pages

Back to Overview

View Live Example Next: Interactive Server