With prerendering, a Blazor component runs first on the server to produce the initial HTML, then again when it becomes interactive. Without care, data is loaded twice and the page "flickers".
The solution in .NET 10
The [PersistentState] attribute saves a property's value during prerendering and restores it when the component becomes interactive.
@page "/products"
@inject ICatalog Catalog
@if (Products is null)
{
<p>Loading...</p>
}
else
{
<ul>
@foreach (var p in Products)
{
<li>@p.Name - @p.Price.ToString("C")</li>
}
</ul>
}
@code {
[PersistentState]
public List<Product>? Products { get; set; }
protected override async Task OnInitializedAsync()
{
// in the interactive phase the value has already been restored
Products ??= await Catalog.ListAsync();
}
}
In earlier versions you had to use PersistentComponentState by hand, registering callbacks and keys: now the attribute is enough.
Other Blazor improvements
- More robust reconnection handling in Blazor Server circuits.
- Framework scripts delivered as fingerprinted static assets, so browsers can cache them for a long time.
- Not-found page handling better integrated with routing.
When to choose Blazor
Blazor is ideal for business applications and rich interfaces written entirely in C#, sharing models and logic between server and client. For public sites with lots of content and little interactivity, Razor Pages or static rendering remain lighter.
Comments (0)
No comments yet.