loading experience

ASP.NET Core

Blazor in .NET 10: persistent state with [PersistentState]

Avoid loading data twice between prerendering and interactivity, with a single attribute.

Blazor in .NET 10: persistent state with [PersistentState]

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".

With [PersistentState] the data loaded during prerendering is reused.
With [PersistentState] the data loaded during prerendering is reused.

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.

Leave a comment