Blazor Prerendering is Finally SOLVED in .NET 10!

A simple guide to smoother pages, better SEO, and happier users

Patrick God

Oct 08, 2025

If you’ve ever built a Blazor app, you know that moment.

You load a page, your data flashes for a second, disappears, and then comes back again.

It feels like a ghost is haunting your page. 👻

Developers tried to fix it by disabling pre-rendering, but that only made things slower and worse for SEO.

Now, with .NET 10, we finally get a real solution.
It’s called the Persistent State Attribute, and it makes your Blazor apps smoother than ever.

If you want to watch me show this in Visual Studio step by step, I also made a YouTube version of this tutorial. You can watch it below. 👇

The “Flash” Problem

Imagine you run a small fantasy shop called The Blazing Blade Emporium.

Every morning, your helper sets out shiny swords for display.

Customers walk in, and for a split second, the shelves go empty before the swords appear again.

That is what happens when Blazor pre-renders.

Here is what’s going on:

The server builds your HTML and sends it to the browser.
Then Blazor runs again on the client, re-creating the same data.
You see a quick “flash” as the second render replaces the first one.

⚔️ Lesson: The flash is not a bug. It happens because Blazor runs twice, once on the server, once on the client.

The Old Fix (and Why It Hurt)

Before .NET 10, one simple fix was to turn off pre-rendering.
That stopped the flash but created a new problem.

Without pre-rendering:

The page loads slower.
The HTML is empty at first.
Search engines can’t index it well.

It’s like telling your shop helper,

“Don’t open the door until I’m fully ready.”

No more flicker, but now your customers wait outside staring at a closed sign.

The New Fix: Persistent State 🎉

Now there is a better way.

The new [PersistentState] attribute lets Blazor keep the data it already created on the server.

So when the app loads on the client, it reuses that data instead of fetching it again.

It’s like your shop helper remembers what was on the shelves.

No empty shelves. No flicker.

Let’s set it up step by step.

Step 1: Create the Project

I’m using Visual Studio 2026 (Insiders) with .NET 10 RC1.
Create a new Blazor Web App, choose Interactive Server Render Mode (per page/component), and skip authentication for now.

We’ll use the default Weather page to test the flash.

Step 2: Watch the Flash

Open the Weather.razor and make sure it uses the InteractiveServer render mode.

@page “/weather”
@rendermode InteractiveServer

Run the app and open the Weather page.

You’ll see:

A quick load of random weather data
A flash
Then a reload with different numbers

Example:

First: 40°F
Reload: 27°F

That is the double render happening right before your eyes. 😮

Step 3: What Developers Did Before

To stop it, people used to turn off pre-rendering:

@rendermode @(new InteractiveServerRenderMode(false))

This removed the flash but also removed pre-rendering benefits.

Your users see a “Loading...” message instead of instant data.

💡 Lesson: Turning off pre-rendering fixes the flash but hurts speed and SEO.

Step 4: Add Persistent State

Now here comes the fun part.

Use the new [PersistentState] attribute to keep your data alive between pre-rendering and hydration.

In your @code block:

[PersistentState]
public WeatherForecast[]? Forecasts { get; set; }

protected override async Task OnInitializedAsync()
{
	// Simulate asynchronous loading to demonstrate streaming rendering
	await Task.Delay(500);

	if (Forecasts is null)
	{
		// Generating random weather data...
	}
}

That’s all it takes.

Now Blazor saves the data from pre-rendering and restores it when the app starts.

Reload your page and look again.

No flicker. No double load. Just smooth rendering.

Step 5: Handle Page Navigation

If you now click between Counter and Weather, you might still see the flash again.

That’s because Blazor does not reload the full page during internal navigation.

The fix is easy: add AllowUpdates = true.

[PersistentState(AllowUpdates = true)]
public WeatherForecast[]? Forecasts { get; set; }

Now, even when you switch between pages, your data stays.

🧠 Think of it like this:
Your shop helper keeps the same shelf state while customers move between rooms.

You can now move between Counter and Weather pages with no flicker at all.

Step 6: When the Connection Drops

If you are using Blazor Server, you know about the SignalR circuit.

When the connection drops, the circuit pauses.

Open the browser console and type:

Blazor.pauseCircuit()

Then reconnect.

You’ll see the same data still there.

That is the Persistent State doing its job.

It keeps your data safe during temporary connection loss.

Step 7: Fine-Tune the Behavior

The [PersistentState] attribute has more settings, though.

You can decide how Blazor should handle saved data with RestoreBehavior.

[PersistentState(AllowUpdates = true, RestoreBehavior = RestoreBehavior.SkipLastSnapshot)]
public WeatherForecast[]? Forecasts { get; set; }

Options include:

Default: restore everything
SkipInitialValue: skip pre-rendered data on startup
SkipLastSnapshot: skip restoring the last saved state

This gives you control over how “fresh” your data should be.

For dashboards, you might want to reload.

For static info like weather summaries, you can keep the saved data.

⚙️ Tip: Choose the restore behavior that matches your app’s user experience.

Step 8: What’s Happening Under the Hood

Before .NET 10, Blazor had two phases:

Server builds HTML (pre-rendering)
Client runs logic again (hydration)

The data in between those two phases got lost.

With Persistent State, Blazor now saves and transfers that state.

It passes the already loaded data right into the hydrated component.

It’s like boxing up your shop’s shelf layout, shipping it, and unpacking it perfectly on arrival.

No wasted effort. No flash.

When It’s Most Useful

Persistent State shines in:

Dashboards with real-time data
E-commerce pages that must look professional
SEO-driven sites needing static HTML
Blazor hybrid apps mixing server and client modes

Why This Matters

This single attribute solves a long-standing pain for Blazor developers.

You no longer have to pick between good SEO and good user experience.

You can have both.

The best code doesn’t just work. It feels right.

Join 15,000+ Developers Learning Blazor

If you found this tutorial helpful, I share new .NET and Blazor lessons every week.

They include project ideas, practical code, and early looks at new framework features like this one.

Take care,

Patrick