How to Use Persist Prerendered State While Prerendering in Blazor App?

Overview

In Blazor Web Apps, when prerendering is enabled, any state created during the prerender phase is typically discarded once the app becomes interactive. This can cause UI flickering or duplicate data loading, especially for components like the Syncfusion Blazor DataGrid, which rely on asynchronous operations.

To address this, Blazor provides the built-in PersistentComponentState service, which allows you to preserve prerendered state and reuse it during the interactive phase. This ensures a smoother, more consistent user experience.

Why Use PersistentComponentState?

Without state persistence:

Async data fetched during prerendering is lost.
Components like SfGrid re-fetch data after the app becomes interactive.
This causes flickering as the UI is rerendered.

With PersistentComponentState:

You can store and restore data between prerender and interactive phases.
The SfGrid renders seamlessly without reloading or visual disruption.

Prerequisites:

.NET 8 SDK
Blazor Web App with prerendering enabled

How to Enable Persist Prerendered State in the Syncfusion Blazor DataGrid?

The following DataGrid.razor component demonstrates how to use the built-in PersistentComponentState service to persist and restore the data source of the SfGrid across prerendering and interactive phases.

DataGrid.razor:

@page "/"
@using PersistPrerenderedState.Models
@using PersistPrerenderedState.Services
//OrderService is injected to fetch data.
@inject OrderService OrderService
//Implements IDisposable to clean up the persistence subscription.
@implements IDisposable
//PersistentComponentState is used to store and retrieve the SfGrid's data.
@inject PersistentComponentState ApplicationState

<SfGrid DataSource="@Orders">
   <GridColumns>
       <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
       <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
       <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
       <GridColumn Field=@nameof(Order.Freight) Format="C2" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
       <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
   </GridColumns>
</SfGrid>
@code{
   private List<Order> Orders { get; set; }
   private PersistingComponentStateSubscription persistingSubscription;

   protected override async Task OnInitializedAsync()
   {
       //TryTakeFromJson attempts to restore previously persisted data.
       //If not available, it fetches fresh data from the service.
       var stateLoaded = ApplicationState.TryTakeFromJson<List<Order>>(nameof(Orders), out var restored);
       Orders = stateLoaded && restored != null ? restored : await OrderService.GetOrdersAsync();
       //RegisterOnPersisting registers a callback to persist the component state during prerendering.
       persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
   }
   private Task PersistData()
   {
       //PersistAsJson saves the data so it can be reused after the app becomes interactive.
       ApplicationState.PersistAsJson(nameof(Orders), Orders);
       return Task.CompletedTask;
   }

   void IDisposable.Dispose() => persistingSubscription.Dispose();
}

Key Benefits:

Single Execution of Expensive Operations: Initialization steps like API calls run only once, improving efficiency.
Flicker-Free UI: The interactive UI matches the prerendered output, preventing visual flicker.

Resources:

Conclusion:

We hope this article helped you learn how to use persist prerendered state while prerendering in a Blazor App.

You can refer to our Blazor General feature tour page to learn about its other groundbreaking features. You can also explore our Documentation to understand how to present and manipulate data. For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor components.

If you have any questions or require clarifications, please let us know in the comments below. You can also contact us through our support forums,Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)