Blazor vs MVC comparison

m in _items) { <tr> <td>@item.Sku</td> <td>@item.Quantity</td> <td> <button @onclick="() => AdjustQuantity(item)">Adjust</button> </td> </tr> } </tbody> </table> }

@code { private List<InventoryItem>? _items; private bool _isUpdating;

protected override async Task OnInitializedAsync()
{
    try
    {
        _items = await InventoryService.GetActiveAsync();
    }
    catch (Exception ex)
    {
        Logger.LogError(ex, "Failed to load inventory");
    }
}

private async Task AdjustQuantity(InventoryItem item)
{
    if (_isUpdating) return;
    _isUpdating = true;
    
    try
    {
        item.Quantity += 1;
        await InventoryService.UpdateAsync(item);
        StateHasChanged();
    }
    finally
    {
        _isUpdating = false;
    }
}

}

Key architectural decisions:
- Use `StateHasChanged()` only when UI must reflect non-event-driven state changes
- Implement debouncing for rapid user inputs to prevent SignalR queue saturation
- Prefer `IInventoryService` over direct `HttpClient` calls to enable testability and caching layers

### Step 4: Shared Architecture & API-First Decisions
Regardless of UI framework, decouple presentation from domain logic:
1. **Shared Contracts**: Place DTOs, validation rules, and domain entities in a `.Contracts` or `.Domain` project
2. **API Gateway**: Expose minimal endpoints; let MVC use server-side HTTP calls and Blazor use `HttpClient` or SignalR hubs
3. **Routing Boundaries**: Use `/app/*` for Blazor routes and `/admin/*` or `/public/*` for MVC to prevent routing conflicts in hybrid deployments

## Pitfall Guide

### 1. Treating Blazor Server as a Stateless MVC Replacement
Blazor Server maintains a circuit per user connection. Assuming it behaves like MVC's request-response model leads to memory leaks when circuits aren't disposed properly. Always configure `CircuitOptions` and implement reconnection handlers. Use `PersistentComponentState` for prerendering to avoid blank screens.

### 2. Over-Fetching in Blazor Components
Fetching entire datasets on component initialization ignores network and memory constraints. Implement pagination, virtualization (`<Virtualize>`), and server-side filtering. Cache aggressively using `IMemoryCache` or distributed Redis when data changes infrequently.

### 3. DOM Manipulation in Blazor
Importing jQuery or direct `element.innerHTML` assignments breaks Blazor's diffing algorithm. Blazor owns the DOM tree it renders. Use `@ref` for specific element references and `IJSRuntime.InvokeVoidAsync` only for non-Blazor-managed interactions. Prefer CSS classes and conditional rendering over manual DOM updates.

### 4. Ignoring Blazor WASM Cold-Start Latency
Downloading the .NET runtime and app assemblies takes 600–900ms on average connections. Failing to implement progressive loading causes abandonment. Use `<script src="_framework/blazor.webassembly.js" autostart="false"></script>` with custom loading UI, enable Brotli compression, and tree-shake unused packages via `<BlazorWebAssemblyEnableLinking>true</BlazorWebAssemblyEnableLinking>`.

### 5. Mixing Routing Paradigms Without Boundaries
Running MVC and Blazor in the same project without route partitioning causes `EndpointRouting` conflicts. MVC uses `MapControllerRoute`, Blazor uses `MapRazorComponents`. In .NET 8+, use `AddRazorComponents()` alongside `AddControllersWithViews()`, but explicitly define route prefixes. Example: `endpoints.MapControllers();` then `endpoints.MapRazorComponents<App>().AddInteractiveServerRenderMode();` with distinct base paths.

### 6. Static State Management Anti-Patterns
Using `static` fields or singletons for UI state in Blazor breaks concurrency and causes cross-user data leakage. Rely on DI-scoped services (`AddScoped` for Server, `AddTransient` for WASM) or `PersistentComponentState`. For complex state, implement a lightweight Redux-style store or use `ComponentBase` event aggregation.

### 7. Neglecting SignalR Connection Health
Blazor Server depends on WebSocket/Long Polling. Network interruptions silently break components if reconnection isn't handled. Implement `Router` with `Found` and `NotFound` templates, add a reconnection UI overlay, and configure `HubOptions` for appropriate keep-alive intervals. Monitor `CircuitHandler` for disconnect events to clean up resources.

## Production Bundle

### Action Checklist
- [ ] Audit interaction topology: Map features to request-response vs. state-rich patterns before framework selection
- [ ] Implement API-first contracts: Share DTOs and validation rules across MVC and Blazor projects
- [ ] Configure circuit resilience: Set `CircuitOptions.DisconnectedCircuitMaxRetained`, add reconnection UI, and log disconnect events
- [ ] Optimize data fetching: Apply server-side pagination, caching, and virtualization; avoid component-level full dataset loads
- [ ] Enforce routing boundaries: Use distinct route prefixes and explicit endpoint mapping to prevent MVC/Blazor conflicts
- [ ] Replace static state with DI-scoped services: Ensure per-user isolation and testability
- [ ] Profile cold-start and payload: Enable Brotli, tree-shake WASM, and implement progressive loading indicators
- [ ] Add monitoring: Track SignalR circuit count, TTI, server memory, and HTTP error rates in production

### Decision Matrix

| Scenario | Recommended Approach | Why | Cost Impact |
|----------|---------------------|-----|-------------|
| Public marketing site with SEO requirements | MVC | Server-rendered HTML ensures crawler compatibility and fast initial paint | Low infrastructure cost, high CDN efficiency |
| Real-time dashboard with live metrics | Blazor Server | SignalR provides sub-50ms updates without polling overhead | Moderate server memory cost, reduced client bandwidth |
| Offline-capable field application | Blazor WASM/Interactive | Runs entirely in browser; resilient to network drops | Higher initial payload, lower long-term server costs |
| Internal CRUD admin panel with moderate interactivity | Blazor Interactive (Auto) | Balances SSR speed with client-side interactivity | Balanced compute distribution, predictable scaling |
| High-concurrency public API + lightweight UI | MVC + minimal JS | Stateless architecture scales horizontally with ease | Lowest server resource consumption per request |

### Configuration Template

```csharp
// Program.cs - .NET 8 Hybrid Setup
var builder = WebApplication.CreateBuilder(args);

// Shared services
builder.Services.AddRazorPages();
builder.Services.AddControllersWithViews();
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

// Domain & Data
builder.Services.AddScoped<IProductRepository, SqlProductRepository>();
builder.Services.AddScoped<IInventoryService, InventoryService>();
builder.Services.AddHttpClient();

// SignalR & Circuit tuning
builder.Services.AddSignalR(hub =>
{
    hub.MaximumReceiveMessageSize = 1024 * 1024; // 1MB
    hub.ClientTimeoutInterval = TimeSpan.FromSeconds(30);
    hub.KeepAliveInterval = TimeSpan.FromSeconds(15);
});

builder.Services.Configure<CircuitOptions>(options =>
{
    options.DisconnectedCircuitMaxRetained = 1000;
    options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromMinutes(3);
});

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.UseAuthorization();

// Explicit routing boundaries
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

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

app.Run();

Quick Start Guide

1. Scaffold the solution: Run dotnet new webapp -n BlazorMvcComparison and add a Blazor component project via dotnet new blazor -n SharedUI. Reference SharedUI from the main project.
2. Configure routing boundaries: In Program.cs, add MapControllers() for MVC routes and MapRazorComponents<App>() for Blazor. Set MVC base path to /admin and Blazor to /app using [Route("admin/[controller]")] and @page "/app/inventory".
3. Implement shared contracts: Create a Contracts class library with ProductDto and InventoryItem. Reference it in both UI projects. Implement a minimal IProductService with in-memory fallback for immediate testing.
4. Add connection resilience: In the Blazor layout, insert <Routes> with a custom Found template that includes a reconnection overlay. Configure CircuitOptions in Program.cs as shown in the template.
5. Run and validate: Execute dotnet run. Navigate to /admin/products for MVC rendering and /app/inventory for Blazor. Verify TTI using browser DevTools Network tab and confirm SignalR circuit establishment via ws://localhost:5000/_blazor.