Understand .NET 9.0 Blazor Hosting Models

Blazor comes in three hosting models: Blazor Server, Blazor WebAssembly (WASM), and Blazor Hybrid. Each model has unique requirements for setup in the Program.cs file and routing. Let's break down what is needed for each.

---

1. Blazor Server

Blazor Server runs the app on the server, with the UI updates sent to the client over a real-time SignalR connection.

Key Setup in Program.cs

csharp
var builder = WebApplication.CreateBuilder(args);

// Add Blazor Server services
builder.Services.AddServerSideBlazor()
    .AddCircuitOptions(options => options.DetailedErrors = true); // Optional: Enable detailed errors

var app = builder.Build();

// Map the Blazor Server app
app.MapBlazorHub(); // Maps SignalR hub for real-time communication
app.MapFallbackToPage("/_Host"); // Fallback route to load the app

app.Run();

Router

The _Host.cshtml file serves as the entry point. Routes are managed server-side.

Example:

razor
<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
</Router>

Notable APIs

• AddServerSideBlazor(): Adds support for server-side Blazor.
• MapBlazorHub(): Configures the SignalR endpoint.
• MapFallbackToPage(): Ensures unmatched routes render the _Host.cshtml.

---

2. Blazor WebAssembly (WASM)

Blazor WebAssembly runs the app entirely in the browser via WebAssembly, with no dependency on a server for execution.

Key Setup in Program.cs

csharp
var builder = WebAssemblyHostBuilder.CreateDefault(args);

// Register root component and services
builder.RootComponents.Add<App>("#app"); // Adds the app to the <div id="app">
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

Router

Routes are resolved client-side because Blazor WASM is fully browser-based.

Example:

razor
<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
</Router>

Notable APIs

• WebAssemblyHostBuilder: Creates the environment for a Blazor WebAssembly app.
• AddRootComponents(): Mounts the app in the DOM.
• AddScoped(): Registers a scoped HttpClient.

---

3. Blazor Hybrid (WebAssembly + Server Interactivity)

Blazor Hybrid combines interactive server rendering and WebAssembly interactivity within the same app. This setup can be used with technologies like .NET MAUI or for apps with advanced rendering needs.

Key Setup in Program.cs

Server-Side Interactive Components

csharp
var builder = WebApplication.CreateBuilder(args);

// Add Razor Components with server interactivity
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// Map Razor Components
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(typeof(SomeSharedLibrary._Imports).Assembly);

app.Run();

WebAssembly + Server-Side Interactivity

csharp
var builder = WebApplication.CreateBuilder(args);

// Add Razor Components with both modes
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

var app = builder.Build();

// Map Razor Components with both render modes
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(SomeSharedLibrary._Imports).Assembly);

app.Run();

Router

Hybrid apps can combine routing and components across both server and WebAssembly.

Example:

razor
<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
</Router>

Notable APIs

• AddInteractiveServerComponents(): Enables server-side interactive components.
• AddInteractiveWebAssemblyComponents(): Enables WebAssembly interactivity.
• AddInteractiveServerRenderMode(): Configures server rendering.
• AddInteractiveWebAssemblyRenderMode(): Configures WebAssembly rendering.

---

Differences Between the Hosting Models

Feature	Blazor Server	Blazor WebAssembly	Blazor Hybrid
Runs On	Server	Browser	Server and Browser
State Management	Server-side memory	Client-side (browser)	Mixed
Hosting Requirement	SignalR connection	Static file hosting	Depends on scenario
Execution	.NET on server	WebAssembly in browser	Both
Setup Complexity	Medium	Simple	Advanced

---

Key Considerations

1. Blazor Server:

   • Best for apps requiring real-time interactivity and centralized state.
   • Relies on a constant connection via SignalR.

2. Blazor WebAssembly:

   • Best for standalone apps that don’t need a backend server for execution.
   • Ideal for deploying as static files to a CDN.

3. Blazor Hybrid:

   • Best for advanced scenarios where you need both server-side and client-side rendering.
   • Adds complexity but provides flexibility.