Official agent skill

Support Prerendering

by dotnet in dotnet/skills

Make interactive Blazor components work correctly with prerendering.

OfficialMITAuto-check passedAgent Workflows

Install Support Prerendering

skills CLI
$ npx skills add dotnet/skills --skill support-prerendering -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install dotnet/skills support-prerendering --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/dotnet/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/dotnet-blazor/skills/support-prerendering .claude/skills/support-prerendering && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
support-prerendering
GitHub stars
5.6k
Used in
1 other repo
Token cost
~1.8k tokens
SKILL.md length
553 words
Files
1
Skills in repo
91
Repo updated
First seen
Licence
MIT

At a glance

Make interactive Blazor components work correctly with prerendering.

  • Works in 4 steps: Register a matching service on the… → Make the service optional — use… → Create a service abstraction — interface… → …
  • Fixing duplicate data loads
  • SKILL.md covers How Prerendering Works, Step 1 — Read the Project's…, Persist State Across Prerender… and Disable Prerendering, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Support Prerendering is an agent skill from dotnet/skills, published by the product's own GitHub organization. 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).

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Agent Workflows. It works with Blazor. The repository describes itself as: Repository for skills to assist AI coding agents with .NET and C. The licence is MIT.

When your agent uses it

  • Fixing duplicate data loads
  • UI flicker during prerender-to-interactive handoff
  • Null references during prerender
  • Persisting state across prerender

Example prompts

  • “/support-prerendering”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Register a matching service on the server — both Program.cs files provide the service
  2. Make the service optional — use constructor injection with a nullable default: public MyComponent(IMyService? svc = null)
  3. Create a service abstraction — interface in .Client, implementations in both projects
  4. Disable prerendering for that component

What it can do on your machine

Read from SKILL.md and the folder at commit 8d670fa. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are razor and csharp).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Support Prerendering loads about 1.8k tokens when it runs. Until then it costs about 126 tokens; SKILL.md has 553 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~126
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from dotnet/skills at commit 8d670fa, republished under its MIT licence (© dotnet). 553 words, ~1,828 tokens.

Download SKILL.mdSave it as .claude/skills/support-prerendering/SKILL.md (or your agent's skills folder).
name
support-prerendering
description
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).
license
MIT

Support Prerendering

How Prerendering Works

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.
  • Internal navigation between interactive pages (interactive routing) skips prerendering — prerendering only happens on full page loads.

Step 1 — Read the Project's AGENTS.md

Check the project's AGENTS.md for the Interactivity Mode and Interactivity Scope:

ModePrerendering applies?
None (Static SSR)No — there's no interactive handoff
ServerYes
WebAssemblyYes
AutoYes

If the mode is None, this skill doesn't apply.

Persist State Across Prerender → Interactive

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.

Annotate properties to automatically serialize during prerender and restore on interactive activation:

razor
@page "/forecasts"
@rendermode InteractiveServer

<h1>Weather</h1>

@if (Forecasts is null)
{
    <p>Loading...</p>
}
else
{
    @foreach (var f in Forecasts)
    {
        <p>@f.Date: @f.TemperatureC°C</p>
    }
}

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

    protected override async Task OnInitializedAsync()
    {
        Forecasts ??= await ForecastService.GetForecastsAsync();
    }
}

The ??= pattern is critical — it means "only fetch if the property wasn't already restored from prerender state."

Multiple instances of the same component

When the same component type appears multiple times, use @key to disambiguate state:

razor
@foreach (var item in items)
{
    <ItemCard @key="item.Id" />
}
Advanced: PersistentComponentState service

For complex scenarios (dynamic keys, custom serialization), use the imperative API:

csharp
@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;
    }
}

Disable Prerendering

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].

On a component definition
razor
@rendermode @(new InteractiveServerRenderMode(prerender: false))

Replace InteractiveServerRenderMode with InteractiveWebAssemblyRenderMode or InteractiveAutoRenderMode as needed.

On a component instance
razor
<MyChart @rendermode="new InteractiveServerRenderMode(prerender: false)" />
On the entire app

In App.razor:

razor
<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />

Note: A parent's prerendering setting overrides children. If <Routes> disables prerendering, individual pages cannot re-enable it.

Exclude Pages from Interactive Routing

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]:

razor
@page "/privacy"
@attribute [ExcludeFromInteractiveRouting]

<h1>Privacy Policy</h1>

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:

razor
<!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;
}

Replace InteractiveServer with the app's configured render mode.

Show full SKILL.md (190 more words)Show less

Detect Prerender vs Interactive at Runtime

Use RendererInfo to guard code that should only run interactively:

csharp
protected override async Task OnInitializedAsync()
{
    if (RendererInfo.IsInteractive)
    {
        // Only runs during the interactive render, not during prerender
        await StartSignalRConnection();
    }
}

RendererInfo properties:

  • IsInteractive — false during prerender, true after interactive runtime attaches
  • Name — "Static" during prerender, "Server" or "WebAssembly" when interactive

Client Services Fail During Prerender

Components 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:

  1. Register a matching service on the server — both Program.cs files provide the service
  2. Make the service optional — use constructor injection with a nullable default: public MyComponent(IMyService? svc = null)
  3. Create a service abstraction — interface in .Client, implementations in both projects
  4. Disable prerendering for that component

Don'ts

  • Don't call JS interop in OnInitializedAsync — JS isn't available during prerender. Use OnAfterRenderAsync(firstRender).
  • Don't assume OnInitializedAsync runs once — it runs twice with prerendering. Always use [PersistentState] or ??= guards.
  • Don't use HttpContext in interactive components — it's only available during the static prerender, not during the interactive lifetime. Use [ExcludeFromInteractiveRouting] for pages that need it.
  • Don't disable prerendering as a first resort — it hurts perceived load time and SEO. Use [PersistentState] to preserve state instead.

© dotnet, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/dotnet-blazor/skills/support-prerendering of dotnet/skills.

Open the folder on GitHubat commit 8d670fa

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in dotnet/skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Support Prerendering next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Support Prerendering compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Support Prerendering this skilldotnet/skills5.6k1 repos~1.8kAutomated safety check: PassMIT
Blazormanagedcode/dotnet-skills486—~2.1kAutomated safety check: PassMIT
Igniteui Wc Figma To AppIgniteUI/igniteui-webcomponents170—~7.2kAutomated safety check: PassMIT
Chrome Devtools MCPmanagedcode/dotnet-skills486—~2.2kAutomated safety check: PassMIT
Aspnet Corefanslead/ReverseProxy.Store1632 repos~1.4kAutomated safety check: PassApache-2.0
Maui AI DebuggingRedth/Maui.Gtk101—~4.1kAutomated safety check: PassMIT

Similar skills

  • Blazor

    managedcode/dotnet-skills

    Build and review Blazor applications across server, WebAssembly, web app, and hybrid scenarios with correct component design, state flow, rendering, and hosting choices.

    486 GitHub stars~2.1k tokensUpdated today
    Agent WorkflowsAuto-check passed
  • Igniteui Wc Figma To App

    IgniteUI/igniteui-webcomponents

    Builds Ignite UI Web Components views from Figma designs, supporting Indigo.Design kits, third-party kits (Material 3, Fluent 2, shadcn/ui, Untitled UI, in-house), and plain frames.

    170 GitHub stars~7.2k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Chrome Devtools MCP

    managedcode/dotnet-skills

    Use Chrome DevTools MCP from .NET agents and .NET-focused repos to inspect, debug, and automate Chrome through an MCP client.

    486 GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed
  • Aspnet Core

    fanslead/ReverseProxy.Store

    Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development.

    163 GitHub starsUsed in 2 repos~1.4k tokens
    Backend & APIsAuto-check passed
  • Maui AI Debugging

    Redth/Maui.Gtk

    End-to-end workflow for building, deploying, inspecting, and debugging .NET MAUI and MAUI Blazor Hybrid apps as an AI agent.

    101 GitHub stars~4.1k tokensUpdated 5 mo ago
    MobileAuto-check passed
  • Test First

    deanhume/html-minifier

    Enforces a strict test-driven development (TDD) workflow for the HTML Minifier repo.

    142 GitHub stars~876 tokensUpdated 20 days ago
    Testing & QAAuto-check passed

More from dotnet/skills

All 91 skills in this repo
  • Official

    Resolves .NET runtime frames in Apple .ips crash logs to function names, source files and line numbers using dSYM symbols, atos and the Microsoft symbol server.

    5.6k GitHub starsUsed in 1 repo~2.4k tokens
    Auto-check passed
  • Official

    Resolves native crash frames from .NET Android tombstones to function names, source files and line numbers using BuildIds, Microsoft's symbol server and llvm-symbolizer.

    5.6k GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed
  • Official

    Scans C# and .NET code for about 50 performance anti-patterns and reports prioritized findings with concrete fixes, at a scan depth you choose.

    5.6k GitHub starsUsed in 3 repos~3.1k tokens
    Auto-check passed
  • Official

    Statically pairs source files with test files to list code that no test references, using Roslyn for C# or tree-sitter for many languages, with no build.

    5.6k GitHub starsUsed in 1 repo~3.3k tokens
    Auto-check passed
  • Microbenchmarking

    dotnet/skills

    Official

    Activate this skill when BenchmarkDotNet (BDN) is involved in the task — creating, running, configuring, or reviewing BDN benchmarks.

    5.6k GitHub starsUsed in 3 repos~3.3k tokens
    Auto-check passed
  • Official

    Makes .NET projects compatible with Native AOT and trimming by resolving IL trim and AOT analyzer warnings through annotations rather than suppressions.

    5.6k GitHub starsUsed in 2 repos~4.2k tokens
    Auto-check passed

Works with

Categories

Questions about Support Prerendering

What does Support Prerendering do?

Make interactive Blazor components work correctly with prerendering. Support Prerendering is an agent skill from dotnet/skills, published by the product's own GitHub organization. Make interactive Blazor components work correctly with prerendering.

When should I use Support Prerendering?

Support Prerendering fits situations like: fixing duplicate data loads; UI flicker during prerender-to-interactive handoff; null references during prerender; persisting state across prerender.

How do I install Support Prerendering in Claude Code?

Run `npx skills add dotnet/skills --skill support-prerendering -a claude-code`. Or copy the skill folder (plugins/dotnet-blazor/skills/support-prerendering in dotnet/skills) into .claude/skills/support-prerendering in your project. Claude Code loads it when a task matches its description.

How do I install Support Prerendering in Codex?

Run `npx skills add dotnet/skills --skill support-prerendering -a codex`. Or copy the skill folder (plugins/dotnet-blazor/skills/support-prerendering in dotnet/skills) into .agents/skills/support-prerendering in your project. Codex loads it when a task matches its description.

Can I use Support Prerendering in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dotnet/skills --skill support-prerendering -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/support-prerendering, .gemini/skills/support-prerendering, .github/skills/support-prerendering and .opencode/skills/support-prerendering in your project.

What does Support Prerendering need to run?

SKILL.md names no scripts, command-line tools or credentials: Support Prerendering is instructions for the agent only.

Does Support Prerendering access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Support Prerendering safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Support Prerendering use?

Support Prerendering is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Support Prerendering use?

About 1.8k tokens (SKILL.md is roughly 7.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Support Prerendering?

Skills that share tags, products or a category with Support Prerendering: Blazor (managedcode/dotnet-skills, 486 stars), Igniteui Wc Figma To App (IgniteUI/igniteui-webcomponents, 170 stars), Chrome Devtools MCP (managedcode/dotnet-skills, 486 stars) and Aspnet Core (fanslead/ReverseProxy.Store, 163 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Support Prerendering?

dotnet (a GitHub organization, an official publisher) maintains it in dotnet/skills, which has 5,568 GitHub stars. The repository holds 91 skills in this directory. The repository was last updated on October 7, 2026.

Source: dotnet/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.