skills.rest
Netcodr81
Netcodr81COMMUNITY
Explore all skills by this author →
GitHub

support-prerendering

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

Updated Jul 20, 2026
Search Tags:#dotnet#webassembly#state persistence#blazor#prerendering#render modes#interactive routing
One-click install
npx skills add https://github.com/Netcodr81/kinetic-reports --skill support-prerendering-netcodr81
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: support-prerendering
Source: https://github.com/Netcodr81/kinetic-reports/tree/main/.github/skills/support-prerendering
Command: npx skills add https://github.com/Netcodr81/kinetic-reports --skill support-prerendering-netcodr81

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 prerendering problems. ## 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 when they need HttpContext access. - Runtime Detection: Use RendererInfo to detect whether a component is currently prerendering and guard interactive-only code such as SignalR connections. - Use Case: A weather forecast page fetches data in OnInitializedAsync and flickers while calling the API twice. Apply [PersistentState] with the ??= pattern so the prerendered data is restored instead of re-fetched. ## Quick Start Ask the AI to fix the duplicate data loading and flicker in your Blazor page by persisting state across prerendering.

Frequently Asked Questions about support-prerendering

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

FAQPage Schema
How do I persist state across prerendering in Blazor?▼

Annotate a component property with the [PersistentState] attribute and fetch data with the ??= pattern so it only loads if not already restored. For complex scenarios, use the PersistentComponentState service with RegisterOnPersisting and TryTakeFromJson.

Why does OnInitializedAsync run twice in Blazor?▼

Prerendering is on by default for interactive render modes, so the component renders once as static HTML on the server and again when the interactive runtime attaches. Use [PersistentState] or ??= guards to avoid duplicate data fetching.

How do I disable prerendering for a Blazor component?▼

Set the render mode with prerender disabled, for example @rendermode @(new InteractiveServerRenderMode(prerender: false)) on the component definition, instance, or the Routes and HeadOutlet in App.razor for the entire app.

Can I use HttpContext in an interactive Blazor component?▼

No, HttpContext is only available during the static prerender phase, not during the interactive lifetime. Apply [ExcludeFromInteractiveRouting] to pages that need cookies, request headers, or response status codes so they render via static SSR.

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. Register a matching server-side service, make the dependency optional, create a shared abstraction, or disable prerendering.

When should I not disable prerendering in Blazor?▼

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

Related Skills

Explore More Software Engineering Skills→
dotnetdotnet
5.3k

configure-auth

Configure authentication and authorization in Blazor Web Apps across render modes.

Official
Intermediate
SparkymodSparkymod
1

blazor-prerender-lifecycle

Resolve Blazor prerender errors and lifecycle issues for server-side rendering.

Community
Intermediate
dotnetdotnet
5.3k

author-component

Create and review Blazor components with correct parameters, lifecycle, and async patterns.

Official
Intermediate
dotnetdotnet
5.3k

support-prerendering

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

Official
Intermediate