Blazor Web App

Learning objectives#

• Describe the four render modes
• Apply a render mode to a component
• Choose a mode for a given scenario
• Understand what changes when a component becomes interactive

Explanation#

Static server-side rendering (Static SSR) renders HTML on the server and sends it to the browser. It is fast and SEO-friendly, but there is no interactivity — @onclick handlers do nothing. Enhanced navigation and streaming rendering still make it feel responsive.

Interactive Server renders on the server and keeps a SignalR (WebSocket) connection open. UI events travel to the server and DOM updates come back. It needs a constant connection and uses server memory per user.

Interactive WebAssembly downloads the .NET runtime and your app to the browser and runs it there. The first load is larger, but afterwards it works without a server connection.

Interactive Auto starts with Interactive Server for a fast first interaction, then switches to WebAssembly on later visits once the runtime is cached.

Visual explanation#

Code example: A counter with an interactive render mode#

1@page "/counter"
2@rendermode InteractiveServer
3

4<PageTitle>Counter</PageTitle>
5<h1>Counter</h1>
6<p role="status">Current count: @currentCount</p>
7<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
8

9@code {
10    private int currentCount = 0;
11    private void IncrementCount() => currentCount++;
12}
13

14@* Program.cs *@
15@* builder.Services.AddRazorComponents()
16       .AddInteractiveServerComponents()
17       .AddInteractiveWebAssemblyComponents();
18   app.MapRazorComponents<App>()
19       .AddInteractiveServerRenderMode()
20       .AddInteractiveWebAssemblyRenderMode()
21       .AddAdditionalAssemblies(typeof(Client._Imports).Assembly); *@

Each click increments the count. Remove @rendermode and the page still renders, but clicking does nothing (Static SSR).

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. @page "/counter" makes the component routable.
2. @rendermode InteractiveServer makes this page interactive over SignalR.
3. @onclick calls IncrementCount; Blazor re-renders the changed parts of the UI.
4. Program.cs must register the interactive render modes you use.
5. WebAssembly components must live in the .Client project so they can be downloaded to the browser.

Real-world use case#

Common mistakes#

Best practices#

• Default to Static SSR and add interactivity only where needed
• Apply render modes at the lowest component that needs them
• Use an API for data access in WebAssembly components
• Plan for SignalR reconnection with Interactive Server

Remember this#

Practice exercise#

1Static SSR — no @rendermode. Add interactivity only to small components such as an “Add to cart” button.

Mini quiz#

Want more? Practise all Blazor MCQs · Blazor interview questions

Related topics#

My notes#

Saved in this browser.