ASP.NET - Blazor Server and Blazor WebAssembly

Blazor is a modern web development framework introduced by Microsoft as part of ASP.NET Core. It allows developers to build interactive web applications using C# instead of JavaScript. Traditionally, web applications required JavaScript for browser-side interactivity, but Blazor enables developers to use .NET technologies across both the client side and server side.

Blazor is built on top of Razor components, which are reusable UI elements written using a combination of HTML and C#. It supports component-based architecture similar to modern JavaScript frameworks such as React, Angular, and Vue.

Blazor has two major hosting models:

  1. Blazor Server

  2. Blazor WebAssembly

Both models use the same programming concepts and component structure, but their execution methods are different.

1. Blazor Server

Blazor Server executes application code on the server. The browser acts mainly as a rendering interface, while all UI events, logic, and processing happen on the server through a real-time connection using SignalR.

Working of Blazor Server

The following steps explain how Blazor Server works:

  1. The user opens the application in a browser.

  2. A SignalR connection is established between the browser and the server.

  3. UI events such as button clicks are sent to the server.

  4. The server processes the event and updates the UI state.

  5. The changed UI components are sent back to the browser.

  6. The browser updates only the modified elements.

This approach reduces the need to transfer the full page repeatedly.

Architecture of Blazor Server

Main components include:

Browser Client

Displays the user interface and communicates with the server.

SignalR Connection

Maintains real-time communication between client and server.

ASP.NET Core Server

Handles application logic, authentication, database operations, and UI rendering.

Razor Components

Reusable UI components containing HTML and C# code.

Features of Blazor Server

Real-Time UI Updates

Changes appear instantly without page refresh.

Thin Client

Most processing happens on the server, reducing browser workload.

Full Access to Server Resources

Direct access to databases, APIs, and server-side services.

Faster Initial Load

The browser downloads minimal resources compared to WebAssembly.

Centralized Security

Sensitive logic remains on the server.

Advantages of Blazor Server

Easy Development

Developers can write full-stack applications using only C#.

Lower Client Requirements

Works well even on low-powered devices.

Better Security

Application logic and data stay on the server.

Small Download Size

Only SignalR scripts and UI updates are transferred.

Simplified Deployment

Application updates happen only on the server.

Limitations of Blazor Server

Constant Internet Connection Required

The application depends on a live SignalR connection.

Higher Server Load

Every connected user consumes server resources.

Scalability Challenges

Large applications with many users require more server capacity.

Latency Dependency

Poor internet connections can affect responsiveness.

Example of a Blazor Server Component

@page "/counter"

<h3>Counter</h3>

<p>Current count: @currentCount</p>

<button @onclick="IncrementCount">
    Click me
</button>

@code {
    private int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

This component updates the counter value whenever the button is clicked.

2. Blazor WebAssembly

Blazor WebAssembly runs directly inside the browser using WebAssembly technology. Instead of executing code on the server, the browser downloads the .NET runtime, application assemblies, and dependencies.

After downloading, the application runs completely on the client side.

What is WebAssembly?

WebAssembly is a low-level binary instruction format supported by modern browsers. It enables high-performance execution of applications inside the browser.

Blazor WebAssembly uses this technology to run .NET applications without plugins.

Working of Blazor WebAssembly

  1. The browser downloads the application files.

  2. The .NET runtime loads into the browser.

  3. Application code executes locally in the browser.

  4. UI interactions happen directly on the client side.

  5. API calls are made to external services if required.

Architecture of Blazor WebAssembly

Browser Runtime

Runs the .NET runtime and application assemblies.

Razor Components

Define UI and behavior.

API Services

External APIs provide data access.

Local Storage and Browser APIs

The application can interact with browser storage and browser features.

Features of Blazor WebAssembly

Client-Side Execution

Application logic runs entirely in the browser.

Offline Capability

Some applications can work offline using caching.

Reduced Server Dependency

The server mainly acts as an API provider.

Cross-Platform Support

Runs on any modern browser.

Reusable .NET Libraries

Shared business logic can be used between server and client.

Advantages of Blazor WebAssembly

Reduced Server Load

The browser handles most processing tasks.

Better Scalability

Servers can support more users because less processing happens centrally.

Offline Support

Applications can continue working even without internet connectivity in some scenarios.

Rich Interactive Experience

Client-side execution improves responsiveness after loading.

Full Client Control

Useful for single-page applications.

Limitations of Blazor WebAssembly

Larger Initial Download

The browser must download the .NET runtime and assemblies.

Slower Startup Time

Applications may take longer to load initially.

Limited Browser Resources

Performance depends on the client device.

Security Concerns

Client-side code can be inspected by users.

Restricted Direct Database Access

Requires APIs for secure data operations.

Comparison Between Blazor Server and Blazor WebAssembly

Feature Blazor Server Blazor WebAssembly
Execution Location Server Browser
Internet Requirement Constant connection needed Can support offline mode
Initial Load Time Faster Slower
Server Load High Lower
Scalability Moderate Better
Security Strong Client-side exposure
Processing Power Server-based Client-based
Deployment Updates Server only Client download required
Response Dependency Network latency Browser performance

Razor Components in Blazor

Razor components are the foundation of Blazor applications.

A component contains:

  • HTML markup

  • C# logic

  • Event handling

  • Data binding

Example:

<h1>Hello User</h1>

<input @bind="name" />

<p>Welcome @name</p>

@code {
    string name = "";
}

This demonstrates two-way data binding.

Data Binding in Blazor

Blazor supports multiple binding methods.

One-Way Binding

<p>@message</p>

Two-Way Binding

<input @bind="message" />

Event Binding

<button @onclick="ShowMessage">
    Click
</button>

Dependency Injection in Blazor

Blazor supports built-in dependency injection similar to ASP.NET Core.

Example:

builder.Services.AddScoped<ProductService>();

Usage inside a component:

@inject ProductService productService

This improves modularity and maintainability.

Authentication and Authorization

Blazor applications support:

  • Identity authentication

  • JWT authentication

  • Role-based authorization

  • OAuth integration

Example:

<AuthorizeView>
    <Authorized>
        Welcome User
    </Authorized>

    <NotAuthorized>
        Please login
    </NotAuthorized>
</AuthorizeView>

State Management in Blazor

Blazor applications maintain state using:

  • Cascading parameters

  • Local storage

  • Session storage

  • In-memory services

  • URL parameters

State management is important for preserving user interactions.

Hosting Models in Blazor

Blazor applications can be hosted in multiple ways:

Standalone WebAssembly

Runs independently in the browser.

Hosted WebAssembly

ASP.NET Core hosts the client and APIs together.

Server Hosting

Application executes entirely on the server.

Performance Considerations

Blazor Server

Performance depends on:

  • Network latency

  • Server memory

  • Number of simultaneous users

Optimization methods:

  • Reduce UI updates

  • Use efficient SignalR communication

  • Scale servers horizontally

Blazor WebAssembly

Performance depends on:

  • Download size

  • Browser capability

  • Client hardware

Optimization methods:

  • Lazy loading assemblies

  • Compression

  • Caching

  • Ahead-of-Time compilation

Use Cases of Blazor Server

Suitable for:

  • Enterprise dashboards

  • Internal business applications

  • Secure data-driven systems

  • Applications requiring centralized control

Use Cases of Blazor WebAssembly

Suitable for:

  • Progressive Web Applications

  • Single-page applications

  • Offline-capable systems

  • Client-heavy interactive applications

Future of Blazor

Blazor is becoming an important part of the .NET ecosystem. With continuous improvements in WebAssembly and ASP.NET Core, Blazor is increasingly used for modern web application development.

Recent advancements include:

  • Hybrid desktop applications with .NET MAUI

  • Improved rendering performance

  • Better JavaScript interoperability

  • Enhanced tooling support

Blazor allows developers to build full-stack applications using a single programming language, reducing complexity and improving development productivity.