support-prerendering

Fix Blazor prerendering issues including duplicate data loads, state loss, and flicker.

Updated Jul 2, 2026
One-click install
npx skills add https://github.com/ecoDriverltd/FoundryAgentsExperiment --skill support-prerendering-ecodriverltd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: support-prerendering
Source: https://github.com/ecoDriverltd/FoundryAgentsExperiment/tree/main/.agents/skills/support-prerendering
Command: npx skills add https://github.com/ecoDriverltd/FoundryAgentsExperiment --skill support-prerendering-ecodriverltd

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 diagnose and fix these problems. ## Core Features & Use Cases - State Persistence: Use the [PersistentState] attribute or PersistentComponentState service to carry data across the prerender-to-interactive transition without re-fetching. - Prerender Control: Disable prerendering per component, per instance, or app-wide, and exclude pages from interactive routing when they need HttpContext. - Runtime Detection: Use RendererInfo.IsInteractive to guard code that must only run after the interactive runtime attaches. - Use Case: A weather page flickers and calls its API twice on load. Apply [PersistentState] with the ??= pattern so forecasts fetched during prerender are restored when the interactive runtime attaches. ## Quick Start Use the support-prerendering skill to stop my Blazor page from loading data twice during prerendering.

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?▼

Blazor prerendering runs OnInitializedAsync twice, causing duplicate data loads. Annotate the property with [PersistentState] and use the ??= pattern so data fetched during prerender is serialized and restored when the interactive runtime attaches instead of being re-fetched.

How do I disable prerendering in Blazor?▼

Disable prerendering by setting prerender: false on the render mode, for example @(new InteractiveServerRenderMode(prerender: false)) on a component, instance, or the HeadOutlet and Routes in App.razor. A parent's setting overrides children, so disabling on Routes affects all pages.

Why does OnAfterRenderAsync not run during Blazor prerendering?▼

OnAfterRenderAsync is not called during prerender because prerendering produces static HTML with no browser runtime attached. It only fires after the interactive Server or WebAssembly runtime loads, so JS interop calls must be placed there rather than in OnInitializedAsync.

Can I use HttpContext in an interactive Blazor component?▼

HttpContext is only available during the static prerender phase, not during the interactive lifetime of a component. For pages needing cookies, headers, or response status codes, apply [ExcludeFromInteractiveRouting] so the page renders via static SSR with full HttpContext access.

Why do client services fail during Blazor prerendering?▼

Components in the .Client project prerender on the server, so services registered only in the client Program.cs are unavailable. Fix this by registering a matching server-side service, making the dependency optional, creating a shared abstraction, or disabling prerendering for that component.