Blazor Server vs Blazor WebAssembly

Analogy categoryAnalogies

Blazor Server and Blazor WebAssembly are the two original hosting models (now exposed as render modes in .NET 8+) and they differ in one fundamental way: where your C# code actually executes. Blazor Server runs your component code on the server and streams UI updates to the browser over a persistent connection, while Blazor WebAssembly downloads a compiled .NET runtime to the browser and runs your code entirely client-side.

🏏

Cricket analogy: It's the difference between a captain calling every field placement live from the dugout via signals (Server, every decision travels back and forth) versus a senior player like Rohit Sharma making in-the-moment calls himself at the crease without waiting for instructions (WebAssembly, decisions happen locally).

How Blazor Server Works

In Blazor Server, the app's C# code runs inside the ASP.NET Core process on the server. The browser holds a thin client that renders HTML and captures DOM events (clicks, keystrokes), sending them to the server over a SignalR-based real-time connection called a circuit. The server re-executes the relevant component logic, computes the UI diff, and pushes just that diff back down to the browser to be applied, which means initial page loads are fast and the download is tiny, but every interaction depends on a live connection.

🏏

Cricket analogy: It's like a third umpire in a stadium reviewing a decision: the on-field signal (click event) travels up to the review room (server), gets processed, and only the final verdict (DOM diff) is sent back down to update the scoreboard.

How Blazor WebAssembly Works

Blazor WebAssembly (WASM) compiles the .NET runtime itself (via Mono or the newer NativeAOT-based runtime) into WebAssembly, along with your app's assemblies, and ships all of it to the browser on first load. Once downloaded, the app runs entirely client-side with no ongoing server dependency for UI logic, making it well-suited to offline-capable apps (via PWA support) but resulting in a larger initial download and requiring the browser to have enough CPU to execute the runtime.

🏏

Cricket analogy: It's like a franchise buying and permanently owning its entire backroom staff and analytics setup instead of renting the national board's facilities for every match — a bigger upfront setup cost, but full independence afterward.

Choosing Between Them

The choice comes down to tradeoffs: Blazor Server offers near-instant startup, small downloads, full access to server resources (databases, file systems) without extra API layers, but every interaction has network latency and the server must maintain a stateful circuit per connected user, which affects scalability. Blazor WebAssembly offers offline capability, no per-user server memory for circuits, and works well behind a CDN, but has a heavier initial download and no direct, secure access to server-side resources without a separate Web API. .NET 8's Interactive Auto mode lets you get both: fast Server startup with an automatic upgrade to WebAssembly.

🏏

Cricket analogy: Picking Server is like fielding a settled top order that scores steadily every over (fast, reliable early), while picking WebAssembly is like promoting a pinch-hitter who takes time to get set but then dominates once in rhythm (bigger upfront cost, independent afterward) — Auto mode is sending in that hitter with a quick single first before they cut loose.

csharp

// Program.cs — Blazor Web App registering both Server and WebAssembly interactivity
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

var app = builder.Build();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

app.Run();

Blazor Server's circuit is stateful and lives on the server for as long as the browser tab is connected. On an unreliable network, disconnects trigger a reconnection UI and, if the circuit can't be resumed within the configured timeout, the user loses all in-memory component state and must reload — this is a common surprise for teams that assume Server mode behaves like a stateless web page.

Blazor Server executes component code on the server and streams UI diffs to the browser over a SignalR circuit.
Blazor WebAssembly downloads a compiled .NET runtime and app assemblies, then runs entirely in the browser.
Server offers fast startup and small downloads but depends on a live, low-latency connection for every interaction.
WebAssembly offers offline capability and CDN-friendly hosting but has a larger initial download.
Server-side circuits consume server memory per connected user, which affects scalability at high concurrency.
WebAssembly has no direct secure access to server resources without a separate Web API layer.
Interactive Auto mode combines both: fast server-rendered startup followed by a switch to WebAssembly once cached.

Practice what you learned

1. Where does component C# code execute in Blazor Server?

2. What real-time connection does Blazor Server use to relay events and UI diffs?

3. What must be downloaded to the browser for Blazor WebAssembly to run?

4. Which hosting model is more vulnerable to interruptions from network instability during interactions?

5. What does the Interactive Auto render mode provide?

Was this page helpful?

What Is Blazor?

Project Structure and App.razor

Related Study Notes in Microsoft Technologies

Browse all study notes

Microsoft Technologies

Windows 10 / UWP Development Study Notes

.NET · 30 topics

Microsoft Technologies

Windows Batch Scripting Study Notes

Batch · 30 topics

Microsoft Technologies

MFC (Microsoft Foundation Classes) Study Notes

C++ · 30 topics

Microsoft Technologies

Silverlight Study Notes

.NET · 30 topics

Microsoft Technologies

XAML Study Notes

.NET · 30 topics

Microsoft Technologies

WPF (Windows Presentation Foundation) Study Notes

.NET · 30 topics

Topics covered

#BlazorStudyNotes#MicrosoftTechnologies#BlazorServerVsBlazorWebAssembly#Blazor#Server#WebAssembly#Works#StudyNotes#SkillVeris#ExamPrep

Blazor Server vs Blazor WebAssembly