Blazor Server-Side Rendering

Learning objectives#

• Explain static SSR and when to use it
• Use streaming rendering for slow data
• Handle forms without interactivity
• Understand enhanced navigation

Explanation#

With static SSR a component renders once per request to plain HTML. No WebSocket and no WebAssembly download — great for content pages and SEO.

Enhanced navigation intercepts link clicks and form posts, fetches the new page and patches the DOM, so the site feels like a single-page app.

[StreamRendering] sends the page shell immediately, then streams the content when async work finishes.

Forms work with standard posts: give EditForm a FormName and bind the model with [SupplyParameterFromForm].

Code example: A streamed product page#

1@page "/products"
2@attribute [StreamRendering]
3@inject IProductService Products
4

5<h1>Products</h1>
6@if (items is null)
7{
8    <p>Loading…</p>
9}
10else
11{
12    <ul>
13        @foreach (var p in items)
14        {
15            <li>@p.Name — ₹@p.Price</li>
16        }
17    </ul>
18}
19

20@code {
21    private List<Product>? items;
22    protected override async Task OnInitializedAsync() => items = await Products.GetAllAsync();
23}

The browser first receives “Loading…”, then the product list replaces it in the same response once the data is ready.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. No @rendermode, so the page is static SSR.
2. [StreamRendering] flushes the initial HTML before OnInitializedAsync finishes.
3. When the data arrives, Blazor streams the updated markup.
4. The output is real HTML that search engines can index.

Real-world use case#

Common mistakes#

Best practices#

• Default to static SSR for content
• Use [StreamRendering] for slow queries
• Add interactivity only to components that need it
• Use SSR forms with FormName for simple submissions

Remember this#

Practice exercise#

1@attribute [StreamRendering]

Mini quiz#

Want more? Practise all Blazor MCQs · Blazor interview questions

Related topics#

My notes#

Saved in this browser.