Číst v angličtině

Sdílet prostřednictvím

Prerender ASP.NET Core Razor components

  • Článek

Poznámka

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Tento článek vysvětluje Razor scénáře předkreslování součástí pro součásti vykreslené serverem v s Blazor Web App.

Předběžné vykreslování je proces počátečního vykreslování obsahu stránky na serveru bez povolení obslužných rutin událostí pro vykreslované ovládací prvky. Server vypíše uživatelské rozhraní HTML stránky co nejdříve v reakci na počáteční požadavek, což aplikaci umožní reagovat na uživatele. Prerendering může také zlepšit optimalizaci vyhledávače (SEO) vykreslením obsahu pro počáteční odpověď HTTP, kterou vyhledávací weby používají k výpočtu pořadí stránek.

Trvalý předsekenderovaný stav

Bez trvalého předrenderovaného stavu dojde ke ztrátě stavu použitého při předrenderování a při úplném načtení aplikace se musí znovu vytvořit. Pokud je některý stav vytvořen asynchronně, uživatelské rozhraní může blikáním blikáním, protože se předsekenderované uživatelské rozhraní nahradí při opětovném dokončení komponenty.

Zvažte následující PrerenderedCounter1 komponentu čítače. Komponenta nastaví počáteční náhodnou hodnotu čítače během předrenderingu v OnInitialized metodě životního cyklu. SignalR Po navázání připojení k klientovi se komponenta znovu vymění a při druhém spuštění se nahradí OnInitialized počáteční hodnota počtu.

PrerenderedCounter1.razor:

razor 
@page "/prerendered-counter-1"
@rendermode @(new InteractiveServerRenderMode(prerender: true))
@inject ILogger<PrerenderedCounter1> Logger

<PageTitle>Prerendered Counter 1</PageTitle>

<h1>Prerendered Counter 1</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount;

    protected override void OnInitialized()
    {
        currentCount = Random.Shared.Next(100);
        Logger.LogInformation("currentCount set to {Count}", currentCount);
    }

    private void IncrementCount() => currentCount++;
}

Spusťte aplikaci a zkontrolujte protokolování z komponenty. Následuje příklad výstupu.

Poznámka

Pokud aplikace přijme interaktivní směrování a k stránce se přistupuje prostřednictvím interního rozšířené navigace, nedojde k předrenderingu. Proto musíte pro komponentu PrerenderedCounter1 znovu načíst celou stránku, abyste viděli následující výstup. Další informace najdete v části Interaktivní směrování a předběžné vykreslování.

info: BlazorSample.Components.Pages.PrerenderedCounter1[0]
currentCount set to 41
info: BlazorSample.Components.Pages.PrerenderedCounter1[0]
currentCount set to 92

K prvnímu zaprotokolovanýmu počtu dochází během předkreslování. Počet se znovu nastaví po předkreslování, když je komponenta znovu vysílaná. V uživatelském rozhraní je také blikající, když se počet aktualizací z 41 na 92 aktualizuje.

Chcete-li zachovat počáteční hodnotu čítače během předrenderingu, Blazor podporuje zachování stavu na předreenderované stránce pomocí PersistentComponentState služby (a pro komponenty vložené do stránek nebo zobrazení Razor aplikací Pages nebo MVC, pomocník pro zachování stavu komponenty).

Pokud chcete zachovat předem připravený stav, rozhodněte se, jaký stav se má zachovat pomocí PersistentComponentState služby. PersistentComponentState.RegisterOnPersisting zaregistruje zpětné volání pro zachování stavu komponenty před pozastavením aplikace. Stav se načte, když se aplikace obnoví.

Následující příklad ukazuje obecný vzor:

  • Zástupný {TYPE} symbol představuje typ dat, která se mají zachovat.
  • Zástupný {TOKEN} symbol je řetězec identifikátoru stavu. Zvažte použití nameof({VARIABLE}), kde {VARIABLE} zástupný symbol je název proměnné, která obsahuje stav. Použití nameof() pro identifikátor stavu zabraňuje použití uvozovaného řetězce.
razor 
@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Následující příklad komponenty čítače zachovává stav čítače během předrenderingu a načte stav pro inicializaci komponenty.

PrerenderedCounter2.razor:

razor 
@page "/prerendered-counter-2"
@implements IDisposable
@inject ILogger<PrerenderedCounter2> Logger
@inject PersistentComponentState ApplicationState

<PageTitle>Prerendered Counter 2</PageTitle>

<h1>Prerendered Counter 2</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override void OnInitialized()
    {
        persistingSubscription =
            ApplicationState.RegisterOnPersisting(PersistCount);

        if (!ApplicationState.TryTakeFromJson<int>(
            nameof(currentCount), out var restoredCount))
        {
            currentCount = Random.Shared.Next(100);
            Logger.LogInformation("currentCount set to {Count}", currentCount);
        }
        else
        {
            currentCount = restoredCount!;
            Logger.LogInformation("currentCount restored to {Count}", currentCount);
        }
    }

    private Task PersistCount()
    {
        ApplicationState.PersistAsJson(nameof(currentCount), currentCount);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose() => persistingSubscription.Dispose();

    private void IncrementCount() => currentCount++;
}

Když se komponenta spustí, currentCount nastaví se pouze jednou během předkreslování. Hodnota je obnovena při opětovném vyřazení komponenty. Následuje příklad výstupu.

Poznámka

Pokud aplikace přijme interaktivní směrování a k stránce se přistupuje prostřednictvím interního rozšířené navigace, nedojde k předrenderingu. Proto musíte pro komponentu PrerenderedCounter2 znovu načíst celou stránku, abyste viděli následující výstup. Další informace najdete v části Interaktivní směrování a předběžné vykreslování.

info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
currentCount set to 96
info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
currentCount restored to 96

Inicializací komponent se stejným stavem, který se používá během předkončování, se všechny nákladné kroky inicializace spustí pouze jednou. Vykreslené uživatelské rozhraní se také shoduje s předem vykresleným uživatelským rozhraním, takže v prohlížeči nedojde k žádnému blikání.

Trvalý prerenderovaný stav se přenese do klienta, kde se používá k obnovení stavu komponenty. Při vykreslování na straně klienta (CSR) InteractiveWebAssemblyse data zveřejňují v prohlížeči a nesmí obsahovat citlivé, soukromé informace. Během interaktivního vykreslování na straně serveru (interaktivní SSR, InteractiveServer), ASP.NET Core Data Protection zajišťuje bezpečný přenos dat. Režim InteractiveAuto vykreslování kombinuje webAssembly a interaktivitu serveru, takže je nutné zvážit vystavení dat prohlížeči, jako v případě CSR.

Komponenty vložené do stránek a zobrazení (Razor Pages/MVC)

Pro komponenty vložené do stránky nebo zobrazení Razor aplikace Pages nebo MVC je nutné přidat pomocníka značky Zachovat stav součásti se <persist-component-state /> značkou HTML uvnitř koncové </body> značky rozložení aplikace. To se vyžaduje jenom pro Razor aplikace Pages a MVC. Další informace naleznete v tématu Zachování pomocné rutiny značky stavu komponenty v ASP.NET Core.

Pages/Shared/_Layout.cshtml:

CSHTML 
<body>
    ...

    <persist-component-state />
</body>

Interaktivní směrování a předkreslování

Pokud komponenta Routes nedefinuje režim vykreslování, aplikace používá interaktivitu a navigaci pro jednotlivé stránky nebo komponenty. Při použití navigace na stránce nebo komponentě je interní† navigace zpracována rozšířeným směrováním poté, co se aplikace stane interaktivní. †Interní v tomto kontextu znamená, že cíl adresy URL navigační události je koncový bod Blazor uvnitř aplikace.

Služba PersistentComponentState funguje pouze při prvotním načtení stránky, nikoli během interních událostí vylepšené navigace na stránce.

Pokud aplikace provede úplnou (nelepšenou) navigaci na stránku, která využívá trvalý stav komponenty, zpřístupní se trvalý stav, který bude aplikace používat, když se stane interaktivní.

Pokud již byl vytvořen interaktivní okruh a rozšířená navigace se provádí na stránce využívající trvalý stav součásti, stav není k dispozici v existujícím okruhu, aby komponenta používala. Pro interní požadavek na stránku neexistuje žádné předběžné nastavení a služba PersistentComponentState si není vědoma, že došlo k rozšířené navigaci. Neexistuje žádný mechanismus pro doručování aktualizací stavu komponent, které už běží v existujícím okruhu. Důvodem je to, že Blazor podporuje pouze předávání stavu ze serveru klientovi v době, kdy se modul runtime inicializuje, ne po spuštění modulu runtime.

Další práce na rozhraní Blazor, která by řešila tento scénář, je zvažována v souvislosti s .NET 10 (listopad 2025). Další informace a diskuzi o nepodporovaných alternativních řešeních¶, najdete v tématu Podpora stavu trvalých součástí v rozšířených navigaci na stránkách (dotnet/aspnetcore č. 51584). {Nepodporovaná alternativní řešení nejsou microsoftem schválená pro použití v aplikacích Blazor. používat balíčky, přístupy a kód třetích stran na vlastní nebezpečí.

Zakázání rozšířené navigace, která snižuje výkon, ale také zabraňuje problému načítání stavu s PersistentComponentState pro interní požadavky na stránky, je popsán v ASP.NET Core Blazor směrování a navigace.

Pokyny k předkreslování

Předběžné pokyny jsou uspořádány do Blazor dokumentace podle předmětu. Následující odkazy pokrývají všechny předběžné pokyny v dokumentaci nastavené podle tématu: