ASP.NET Core Razor-komponensek előrenderelése

Ez a cikk az s és Razor alkalmazások kiszolgáló által renderelt összetevőinek összetevő-előrendelési forgatókönyveit Blazor Web AppismertetiBlazor Server.

Az előrendelés az a folyamat, amely során statikusan rendereli a lap tartalmát a kiszolgálóról, hogy a lehető leggyorsabban kézbesítse a HTML-t a böngészőnek. Miután az előre berendelt tartalom gyorsan megjelenik a felhasználó számára, az interaktív tartalom aktív eseménykezelőkkel jelenik meg, lecserélve a korábban renderelt tartalmakat. Az előrendelés a keresőmotor-optimalizálást (SEO) is javíthatja azáltal, hogy megjeleníti a keresőmotorok által az oldal rangjának kiszámításához használt kezdeti HTTP-válasz tartalmát.

Az előzetes rendezés alapértelmezés szerint engedélyezve van az interaktív összetevők esetében.

Az interaktív útválasztással rendelkező belső navigáció nem használ előrerendezést, mert a lap már interaktív. További információ: Statikus és interaktív útválasztás , interaktív útválasztás és előrendelés.

OnAfterRender{Async} az összetevő életciklus-eseményei nem lesznek meghívva előrendeléskor, csak azután, hogy az összetevő interaktívan renderel.

Az előrendelés letiltása

Az előrendelés bonyolíthatja az alkalmazásokat, mert az alkalmazás Razor összetevőinek kétszer kell renderelnie: egyszer az előrendeléshez, egyszer pedig az interaktivitás beállításához. Ha az összetevők úgy vannak beállítva, hogy a WebAssemblyen fussanak, akkor az összetevőket is úgy kell megterveznie, hogy azok a kiszolgálóról és az ügyfélről is fussanak.

Ha le szeretné tiltani egy összetevőpéldány előrendelését, adja át a prerender jelölőt false értékkel a renderelési módnak:

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

Az előrenderelés letiltása egy összetevő definíciójában:

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

Ha le szeretné tiltani az előrendelést a teljes alkalmazásra vonatkozóan, jelölje meg a renderelési módot az alkalmazás összetevőhierarchiájának legmagasabb szintű interaktív összetevőjén, amely nem gyökérösszetevő.

A Blazor Web App projektsablonon alapuló alkalmazások esetében a teljes alkalmazáshoz hozzárendelt renderelési mód van megadva, ahol a Routes összetevőt a App összetevő (Components/App.razor) használja. Az alábbi példa az alkalmazás megjelenítési módját Interaktív Szerverre állítja, az előrenderelés pedig le van tiltva.

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

Emellett tiltsa le a HeadOutlet részében.

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

A gyökérösszetevő( például a App összetevő) interaktívvá tétele a gyökérösszetevő definíciós fájljának tetején található @rendermode irányelvvel (.razor) nem támogatott. Ezért a App összetevő nem tilthatja le közvetlenül az előzetes rendezést.

Az előrendelés letiltása az előző technikákkal csak a legfelső szintű renderelési módok esetében lép érvénybe. Ha egy szülőösszetevő renderelési módot ad meg, a rendszer figyelmen kívül hagyja a gyermekek előrendelési beállításait.

Előre beállított állapot megőrzése

Az előre beállított állapot megőrzése nélkül az előrendelés során használt állapot elveszik, és újra létre kell hozni az alkalmazás teljes betöltésekor. Ha bármilyen állapot aszinkron módon jön létre, a felhasználói felület villoghat, mivel az előrerendezett felhasználói felület lecserélődik az összetevő újrarendezésekor. Az állapot előrendelés során történő megőrzéséről a ASP.NET Core Blazor előrerendezett állapotmegőrzési szakaszában talál útmutatást.

A kliensoldali szolgáltatáskomponensek nem oldhatók fel előrenderelés során.

Feltételezve, hogy az előzetes renderelés nincs letiltva egy komponens vagy az alkalmazás esetében, a .Client projektben található komponens előzetesen renderelt a kiszolgálón. Mivel a kiszolgáló nem rendelkezik hozzáféréssel a regisztrált ügyféloldali Blazor szolgáltatásokhoz, nem lehet ezeket a szolgáltatásokat egy összetevőbe injektálni anélkül, hogy hibaüzenetet kap, amely miatt a szolgáltatás nem található az előrendelés során.

Vegyük például az alábbi Home összetevőt a .Client projektben egy Blazor Web Appglobális interaktív WebAssembly vagy interaktív automatikus megjelenítési. Az összetevő megpróbál IWebAssemblyHostEnvironment injektálni a környezet nevének lekéréséhez.

@page "/"
@inject IWebAssemblyHostEnvironment Environment

<PageTitle>Home</PageTitle>

<h1>Home</h1>

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

Nem fordul elő fordítási idő hiba, de futásidejű hiba lép fel az előzetes renderelés során.

A "Environment" tulajdonság értéke nem adható meg a "BlazorSample.Client.Pages" típuson.Home'. Nincs "Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment" típusú regisztrált szolgáltatás.

Ez a hiba azért fordul elő, mert az összetevőnek fordítást és végrehajtást kell végeznie a kiszolgálón az előrendelés során, de IWebAssemblyHostEnvironment nem regisztrált szolgáltatás a kiszolgálón.

A forgatókönyv megoldásához vegye figyelembe az alábbi módszerek bármelyikét:

• A szolgáltatás regisztrálása a kiszolgálón az ügyfél mellett
• Szolgáltatás injektálása, amelyet az alkalmazás az előrenderelés során használhat
• A szolgáltatás megadása nem kötelező
• Szolgáltatás absztrakció létrehozása
• Az összetevő előzetes beállításának letiltása

A szolgáltatás regisztrálása a kiszolgálón az ügyfél mellett

Ha a szolgáltatás támogatja a kiszolgáló végrehajtását, regisztrálja a szolgáltatást a szerveren is az ügyfél mellett, hogy az az előzetes renderelés során elérhető legyen. Erre a forgatókönyvre példaként tekintse meg a HttpClient szóló Blazor Web App szakaszában található szolgáltatásokra vonatkozó útmutatót.

Az alkalmazás által az előfeldolgozás során használható szolgáltatás injektálása

Bizonyos esetekben az alkalmazás használhat egy szolgáltatást a kiszolgálón az előrendelés során, és egy másik szolgáltatást az ügyfélen.

A következő kód például beolvasja az alkalmazás környezetét, függetlenül attól, hogy a kód a kiszolgálón vagy az ügyfélen fut-e a IHostEnvironment való injektálássalMicrosoft.Extensions.Hosting.Abstractions:

private string? environmentName;

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

Ez a megközelítés azonban egy további függőséget ad hozzá az ügyfélprojekthez, amely nem szükséges.

A szolgáltatás megadása nem kötelező

Ha az előrendelés során nem szükséges, tegye a szolgáltatást opcionálissá az alábbi módszerek egyikével.

Az alábbi példa a következő konstruktorinjektálást IWebAssemblyHostEnvironmenthasználja:

private string? environmentName;

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

Másik lehetőségként illessze be IServiceProvider, hogy opcionálisan beszerezze a szolgáltatást, ha elérhető.

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

Szolgáltatás absztrakció létrehozása

Ha a kiszolgálón más szolgáltatás-implementációra van szükség, hozzon létre egy szolgáltatás absztrakciót, és hozzon létre implementációkat a szolgáltatáshoz a kiszolgálón és az ügyfélprojektekben. Regisztrálja a szolgáltatásokat az egyes projektekben. Szükség esetén injektálja az egyéni szolgáltatás absztrakciót az összetevőkbe. Az összetevő ezután csak az egyéni szolgáltatás absztrakciójától függ.

Ebben az esetben IWebAssemblyHostEnvironmenta meglévő felületet újra felhasználhatjuk új helyett:

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

A kiszolgálóprojekt fájljában regisztrálja Program a szolgáltatást:

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

Ezen a ponton a IWebAssemblyHostEnvironment szolgáltatás injektálható egy interaktív WebAssembly vagy Auto összetevőbe, amely szintén előre van berendelve a kiszolgálóról.

Az összetevő előzetes renderelésének letiltása

Tiltsa le az összetevő vagy a teljes alkalmazás előzetes renderelését. További információért lásd az Előfeldolgozás letiltása szakaszt.