OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add dotnet/skills --skill support-prerendering
Make interactive Blazor components work correctly with prerendering. USE FOR fixing duplicate data loads, UI flicker during prerender-to-interactive handoff, null references during prerender, persisting state across prerender, disabling prerendering, excluding pages from interactive routing, or detecting whether a component is currently prerendering. DO NOT USE for choosing which render mode to use (see create-blazor-project) or general component authoring (see author-component).
npx skills add dotnet/skills --skill support-prerendering
Prerendering is on by default for all interactive render modes. The server renders the component as static HTML and ships it to the browser immediately. Then the interactive runtime (Server/WebAssembly) loads and re-renders the component with full interactivity.
This means:
OnInitializedAsync runs twice — once during prerender (static), once when the interactive runtime attaches.OnAfterRenderAsync is NOT called during prerender — only after the interactive render.Check the project's AGENTS.md for the Interactivity Mode and Interactivity Scope:
| Mode | Prerendering applies? |
|---|---|
| None (Static SSR) | No — there's no interactive handoff |
| Server | Yes |
| WebAssembly | Yes |
| Auto | Yes |
If the mode is None, this skill doesn't apply.
The most common prerendering problem: data loaded in OnInitializedAsync during prerender is thrown away and re-fetched when the interactive runtime attaches. This causes flicker and duplicate API/DB calls.
[PersistentState] attributeAnnotate properties to automatically serialize during prerender and restore on interactive activation:
The ??= pattern is critical — it means "only fetch if the property wasn't already restored from prerender state."
When the same component type appears multiple times, use @key to disambiguate state:
PersistentComponentState serviceFor complex scenarios (dynamic keys, custom serialization), use the imperative API:
Disable prerendering when a component depends on browser APIs immediately or when the prerender+interactive double render causes problems you can't solve with [PersistentState].
Replace InteractiveServerRenderMode with InteractiveWebAssemblyRenderMode or InteractiveAutoRenderMode as needed.
In App.razor:
Note: A parent's prerendering setting overrides children. If <Routes> disables prerendering, individual pages cannot re-enable it.
In a globally interactive app, some pages may need HttpContext (cookies, request headers, response status codes). These pages must render via static SSR, not inside the interactive runtime.
Use [ExcludeFromInteractiveRouting]:
This forces a full page reload when navigating to this page, exiting interactive routing. The page renders as static SSR with full HttpContext access.
In App.razor, conditionally apply the render mode:
Replace InteractiveServer with the app's configured render mode.
Use RendererInfo to guard code that should only run interactively:
RendererInfo properties:
IsInteractive — false during prerender, true after interactive runtime attachesName — "Static" during prerender, "Server" or "WebAssembly" when interactiveComponents in the .Client project prerender on the server. Services registered only in the client Program.cs (e.g., IWebAssemblyHostEnvironment) won't be available during prerender.
Fix by one of:
Program.cs files provide the servicepublic MyComponent(IMyService? svc = null).Client, implementations in both projectsOnInitializedAsync — JS isn't available during prerender. Use OnAfterRenderAsync(firstRender).OnInitializedAsync runs once — it runs twice with prerendering. Always use [PersistentState] or ??= guards.HttpContext in interactive components — it's only available during the static prerender, not during the interactive lifetime. Use [ExcludeFromInteractiveRouting] for pages that need it.[PersistentState] to preserve state instead.@foreach (var item in items)
{
<ItemCard @key="item.Id" />
}@inject PersistentComponentState ApplicationState
@code {
private List<Order>? orders;
protected override async Task OnInitializedAsync()
{
ApplicationState.RegisterOnPersisting(PersistOrders);
if (!ApplicationState.TryTakeFromJson<List<Order>>("orders", out var restored))
{
orders = await OrderService.GetOrdersAsync();
}
else
{
orders = restored;
}
}
private Task PersistOrders()
{
ApplicationState.PersistAsJson("orders", orders);
return Task.CompletedTask;
}
}@rendermode @(new InteractiveServerRenderMode(prerender: false))<MyChart @rendermode="new InteractiveServerRenderMode(prerender: false)" /><HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />@page "/privacy"
@attribute [ExcludeFromInteractiveRouting]
<h1>Privacy Policy</h1><!DOCTYPE html>
<html>
<head>
<HeadOutlet @rendermode="RenderModeForPage" />
</head>
<body>
<Routes @rendermode="RenderModeForPage" />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
@code {
[CascadingParameter]
public HttpContext HttpContext { get; set; } = default!;
private IComponentRenderMode? RenderModeForPage =>
HttpContext.AcceptsInteractiveRouting() ? InteractiveServer : null;
}protected override async Task OnInitializedAsync()
{
if (RendererInfo.IsInteractive)
{
// Only runs during the interactive render, not during prerender
await StartSignalRConnection();
}
}