support-prerendering

Fix duplicate data loads and state loss in prerendered interactive Blazor components.

1|Updated Jun 1, 2026
One-click install
npx skills add https://github.com/D1ssolve/craft-agents --skill support-prerendering-d1ssolve
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: support-prerendering
Source: https://github.com/D1ssolve/craft-agents/tree/main/skills/support-prerendering
Command: npx skills add https://github.com/D1ssolve/craft-agents --skill support-prerendering-d1ssolve

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interactive Blazor components prerender on the server by default, causing OnInitializedAsync to run twice, data to be fetched twice, UI flicker during the prerender-to-interactive handoff, and null references when browser APIs are unavailable. This Skill provides the patterns to make components behave correctly across that boundary. ## Core Features & Use Cases - State Persistence: Persist component state across the prerender-to-interactive transition using the [PersistentState] attribute or the PersistentComponentState service, eliminating duplicate API and database calls. - Prerendering Control: Disable prerendering per component, per instance, or app-wide, and exclude pages from interactive routing with [ExcludeFromInteractiveRouting] when HttpContext access is required. - Runtime Detection: Use RendererInfo.IsInteractive to guard code that must only run after the interactive runtime attaches. - Use Case: A weather page fetches forecasts in OnInitializedAsync and calls the API twice with a visible flicker. Apply [PersistentState] with the ??= guard so data is serialized during prerender and restored on interactive activation. ## Quick Start Fix my Blazor page so it stops fetching data twice during prerendering by persisting the component state.

Frequently Asked Questions about support-prerendering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop Blazor from loading data twice with prerendering?

Annotate the data property with [PersistentState] and fetch with the ??= pattern so the value is serialized during prerender and restored when the interactive runtime attaches. For complex scenarios, use PersistentComponentState with RegisterOnPersisting and TryTakeFromJson.

How to disable prerendering in Blazor interactive components?

Set the render mode with prerender disabled, for example @rendermode @(new InteractiveServerRenderMode(prerender: false)) on a component definition, instance, or the Routes and HeadOutlet in App.razor. A parent's setting overrides children, so disabling on Routes applies app-wide.

Why does OnInitializedAsync run twice in Blazor Server?

Prerendering renders the component as static HTML first, then the interactive runtime re-renders it, so OnInitializedAsync executes once per phase. OnAfterRenderAsync only runs after the interactive render, never during prerender.

Can I use HttpContext in interactive Blazor components?

No, HttpContext is only available during the static prerender phase, not during the interactive lifetime. Mark pages needing cookies or request headers with [ExcludeFromInteractiveRouting] so they render via static SSR with full HttpContext access.

Why do client services fail during Blazor prerendering?

Components in the .Client project prerender on the server, where services registered only in the client Program.cs are unavailable. Register a matching server-side service, make the dependency optional, define a shared abstraction, or disable prerendering for that component.

When should I not disable prerendering in Blazor?

Avoid disabling prerendering as a first resort because it hurts perceived load time and SEO. Prefer [PersistentState] to preserve data across the handoff, and only disable prerendering when a component depends on browser APIs immediately.