Sdílet prostřednictvím

Prerender ASP.NET Core Razor components

  • Článek

Tento článek vysvětluje Razor scénáře předběžného vykreslování součástí pro součásti vykreslené serverem ve Blazor službě Web Apps.

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:

@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í (rozšířené) směrování a stránka se dostane přes interní navigaci, nedojde k předrenderování. Proto musíte pro komponentu PrerenderedCounter1 znovu načíst celou stránku, abyste viděli následující výstup.

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.
@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:

@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 stránka se dostane přes interní navigaci, nedojde k předdeenderování. Proto musíte pro komponentu PrerenderedCounter2 znovu načíst celou stránku, abyste viděli následující výstup.

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

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:

<body>
    ...

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

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

Interní navigace pro interaktivní směrování nezahrnuje vyžádání nového obsahu stránky ze serveru. Proto u interních požadavků na stránku nedojde k předběžnému provedení.

Služba PersistentComponentState funguje pouze na počátečním načtení stránky, a ne u rozšířených událostí 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 už je ale navázán interaktivní okruh a provede se rozšířená navigace na stránce, která vykreslí trvalý stav součásti, tento stav se v existujícím okruhu nezpřístupní. Služba PersistentComponentState neví o vylepšené navigaci a neexistuje žádný mechanismus pro doručování aktualizací stavu pro komponenty, které už jsou spuštěné.

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: