Blazor Features Evolution: .NET 6 → .NET 10
| Feature | .NET 6 | .NET 7 | .NET 8 | .NET 10 (Latest) |
|---|---|---|---|---|
| Hosting Models | WASM, Server | + Hybrid MAUI | Unified model emerging | Unified Server/WASM |
| AOT Compilation (WASM) | Experimental | Improved | Optimized + trimming | Faster & smaller AOT builds |
| Render Modes | N/A | N/A | Basic hybrid setup | Per-component @rendermode |
| Form Validation | Basic | Minor updates | Custom input support | Async & extensible validation |
| JS Interop | Manual | JS module API | Typed modules | Improved import/export + TS typing |
| Routing | Static only | +Route params | Route constraints | Enhanced deep linking + constraints |
| Razor Components | Web only | Improvements | Shared across MAUI | Full-stack Razor UI (static + server) |
| Streaming SSR | N/A | N/A | Initial release | Streaming rendering refined |
| Identity Support in WASM | Manual config | Minimal | Identity + token helpers | Out-of-box Identity with WASM |
| Blazor in .NET MAUI | Early Hybrid | Better sync | Performance boost | Tight native integration |
.NET 10 Blazor Feature Code Examples
1. Render Modes Per Component
Now you can control how a component renders (Server, WASM, or Static)
@rendermode InteractiveServer
<!-- or -->
@rendermode InteractiveWebAssembly
<!-- or -->
@rendermode Static
<h3>This component renders using a custom mode!</h3>
2. Streaming Rendering in Server-Side Blazor
Renders HTML as it’s available, improving TTFB (enabled in Program.cs)
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents()
.AddStreamingRendering(); // 👈 new in .NET 10
3. Enhanced Routing with Constraints
Example: Only match numeric IDs
@page "/product/{id:int}"
@code {
[Parameter]
public int Id { get; set; }
}
4. Async Form Validation
Now you can validate forms asynchronously (e.g., check username availability)
<EditForm Model="@user" OnValidSubmit="@HandleValidSubmit">
<InputText @bind-Value="user.Username" />
<ValidationMessage For="@(() => user.Username)" />
</EditForm>
@code {
private UserModel user = new();
private async Task HandleValidSubmit()
{
// Async logic here
}
public class UserModel
{
[Required]
[RemoteValidation] // Custom async validator
public string Username { get; set; }
}
}
5. JS Module Interop Improvements
You can now import JavaScript modules using clean syntax:
wwwroot/js/myModule.js
export function showAlert(msg) {
alert(msg);
}
Blazor Component
@inject IJSRuntime JS
<button @onclick="ShowAlert">Click Me</button>
@code {
private async Task ShowAlert()
{
var module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/myModule.js");
await module.InvokeVoidAsync("showAlert", "Hello from JS!");
}
}
RELATED POSTS
View all
