Sdílet prostřednictvím

Předvykreslit ASP.NET Core Razor komponenty

Poznámka

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

Tento článek vysvětluje Razor scénáře předkreslování součástí pro součásti vykreslené serverem v Blazor Web Appaplikacích a Blazor Server aplikacích.

Prerendering je proces statického vykreslování obsahu stránky ze serveru, aby co nejrychleji doručil HTML do prohlížeče. Po rychlém zobrazení předem vykresleného obsahu uživateli se vykreslí interaktivní obsah s aktivními obslužnými rutinami událostí a nahradí veškerý obsah, který byl vykreslen dříve. Prerendering může také zlepšit optimalizaci pro vyhledávače (SEO) tím, že vykreslí obsah pro počáteční HTTP odpověď, kterou vyhledávače používají k výpočtu hodnocení stránky.

U interaktivních komponent je ve výchozím nastavení povolené předkreslování.

Interní navigace s interaktivním směrováním nepoužívá předkreslování, protože stránka je už interaktivní. Další informace najdete v tématu Statické versus interaktivní směrování a interaktivní směrování a předkreslování.

OnAfterRender{Async} Události životního cyklu komponent se při předkreslování nevolá, pouze když se komponenta vykreslí interaktivně.

Zakázání předrenderování

Prerendering může aplikaci komplikovat, protože komponenty aplikace Razor se musí vykreslit dvakrát: jednou pro předkreslování a jednou pro nastavení interaktivity. Pokud jsou komponenty nastavené tak, aby běžely na WebAssembly, musíte také navrhnout komponenty tak, aby se mohly spouštět z serveru i klienta.

Pokud chcete zakázat prerendering pro instanci komponenty, předejte prerender příznak s hodnotou false do režimu vykreslování:

  • <... @rendermode="new InteractiveServerRenderMode(prerender: false)" />
  • <... @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
  • <... @rendermode="new InteractiveAutoRenderMode(prerender: false)" />

Zakázání předkreslování v definici komponenty:

  • @rendermode @(new InteractiveServerRenderMode(prerender: false))
  • @rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
  • @rendermode @(new InteractiveAutoRenderMode(prerender: false))

Pokud chcete zakázat prerendering pro celou aplikaci, označte režim vykreslování na nejvyšší úrovni interaktivní komponenty v hierarchii komponent aplikace, která není kořenovou komponentou.

U aplikací založených na Blazor Web App šabloně projektu se určuje režim vykreslování přiřazený k celé aplikaci, kde se komponenta Routes používá v dané komponentě App (Components/App.razor). Následující příklad nastaví režim vykreslení aplikace na Interactive Server se zakázaným předrenderováním:

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

Zakažte také předkreslování komponenty HeadOutlet v této komponentě:App

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

Vytvoření kořenové komponenty, například App komponenty, interaktivní se @rendermode direktivou v horní části definičního souboru kořenové komponenty (.razor) není podporováno. Proto není možné předřazování přímo zakázat komponentou App .

Zakázání předběžného vykreslování pomocí předchozích technik se projeví pouze pro režimy vykreslování nejvyšší úrovně. Pokud nadřazená komponenta určuje režim vykreslení, nastavení předběžného vykreslování jejích podřízených komponent se ignoruje.

Uchovejte předem vykreslený stav

Bez trvalého uložení předem vykresleného stavu se stav použitý během předběžného vykreslování ztrácí a musí být znovu vytvořen, když je aplikace plně načtena. Pokud se stav vytvoří asynchronně, může UI poblikávat, protože se prerenderované UI nahradí při opětovném renderování komponenty. Pokyny k zachování stavu během předkreslování najdete v tématu ASP.NET trvalost stavu předkažovaného jádraBlazor.

Služby na straně klienta se nepodaří vyřešit během předběžného renderování.

Za předpokladu, že prerendering není zakázán pro komponentu ani aplikaci, je komponenta v projektu .Client předrenderována na serveru. Vzhledem k tomu, že server nemá přístup k registrovaným službám na straně Blazor klienta, není možné tyto služby vložit do komponenty, aniž by se zobrazila chyba, že se služba během předběžného běhu nenašla.

Představte si například následující Home komponentu .Client v projektu s Blazor Web App s globálním interaktivním WebAssembly nebo interaktivním automatickým vykreslováním. Komponenta se pokusí vložit IWebAssemblyHostEnvironment , aby získala název prostředí.

@page "/"
@inject IWebAssemblyHostEnvironment Environment

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<p>
    Environment: @Environment.Environment
</p>

Během doby kompilace nedojde k žádné chybě, ale během předkreslování dojde k chybě za běhu.

Nelze zadat hodnotu vlastnosti 'Environment' v typu 'BlazorSample.Client.Pages.Home'. Neexistuje žádná registrovaná služba typu Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment.

K této chybě dochází, protože komponenta se musí zkompilovat a spouštět na serveru během předřazení, ale IWebAssemblyHostEnvironment není registrovanou službou na serveru.

Při řešení tohoto scénáře zvažte některý z následujících přístupů:

Registrace služby na serveru kromě klienta

Pokud služba podporuje spouštění na serveru, zaregistrujte službu na serveru stejně jako na klientovi, aby byla dostupná během předběžného vykreslování. Příklad tohoto scénáře najdete v doprovodných materiálech pro HttpClient služby v Blazor Web App části Externí webová rozhraní API článku o volání webového rozhraní API .

Vložte službu, kterou může aplikace použít při předvykreslování

V některých případech může aplikace používat službu na serveru během předběžného nastavení a jiné služby v klientovi.

Následující kód například získá prostředí aplikace bez ohledu na to, jestli je kód spuštěný na serveru nebo v klientovi vložením IHostEnvironment z Microsoft.Extensions.Hosting.Abstractions balíčku NuGet:

private string? environmentName;

public Home(IHostEnvironment? serverEnvironment = null, 
    IWebAssemblyHostEnvironment? wasmEnvironment = null)
{
    environmentName = serverEnvironment?.EnvironmentName;
    environmentName ??= wasmEnvironment?.Environment;
}

Tento přístup ale přidá další závislost do klientského projektu, který není potřeba.

Nastavení služby jako volitelné

Pokud se služba nevyžaduje během předběžného předkreslování pomocí některého z následujících přístupů, nastavte ji jako volitelnou.

Následující příklad používá injekci konstruktorem IWebAssemblyHostEnvironment:

private string? environmentName;

public Home(IWebAssemblyHostEnvironment? env = null)
{
    environmentName = env?.Environment;
}

Případně, pokud je dostupná, můžete službu IServiceProvider získat volitelně.

@page "/"
@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IServiceProvider Services

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<p>
    <b>Environment:</b> @environmentName
</p>

@code {
    private string? environmentName;

    protected override void OnInitialized()
    {
        if (Services.GetService<IWebAssemblyHostEnvironment>() is { } env)
        {
            environmentName = env.Environment;
        }
    }
}

Vytvoření abstrakce služby

Pokud na serveru potřebujete jinou implementaci služby, vytvořte abstrakci služby a vytvořte implementace pro službu v serverových a klientských projektech. Zaregistrujte služby v každém projektu. V případě potřeby vložte abstrakci vlastní služby do komponent. Komponenta pak závisí výhradně na abstrakci vlastní služby.

V případě IWebAssemblyHostEnvironment, můžeme znovu použít existující rozhraní místo vytvoření nové:

ServerHostEnvironment.cs:

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.AspNetCore.Components;

public class ServerHostEnvironment(IWebHostEnvironment env, NavigationManager nav) : 
    IWebAssemblyHostEnvironment
{
    public string Environment => env.EnvironmentName;
    public string BaseAddress => nav.BaseUri;
}

V souboru projektu serveru Program zaregistrujte službu:

builder.Services.TryAddScoped<IWebAssemblyHostEnvironment, ServerHostEnvironment>();

V tomto okamžiku IWebAssemblyHostEnvironment lze službu vložit do interaktivní webAssembly nebo automatické komponenty, která je také předem vygenerována ze serveru.

Zakázání předběžného renderingu pro komponentu

Zakažte předběžné nastavení pro komponentu nebo pro celou aplikaci. Další informace najdete v části Zakázání předrenderingu .

  • Last updated on