Dela via


Komponenter i Prerender ASP.NET Core Razor

Anteckning

Det här är inte den senaste versionen av den här artikeln. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Viktig

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

I den här artikeln beskrivs Razor föråtergivningsscenarier för komponenter som återges på servern i Blazor Web Apps och Blazor Server-appar.

Prerendering är processen för statisk återgivning av sidinnehåll från servern för att leverera HTML till webbläsaren så snabbt som möjligt. När det förinstallerade innehållet snabbt visas för användaren återges interaktivt innehåll med aktiva händelsehanterare, vilket ersätter allt innehåll som återges tidigare. Prerendering kan också förbättra sökmotoroptimering (SEO) genom att återge innehåll för det första HTTP-svaret som sökmotorer använder för att beräkna sidrankning.

Prerendering är aktiverat som standard för interaktiva komponenter.

Intern navigering med interaktiv routning använder inte prerendering eftersom sidan redan är interaktiv. Mer information finns i Statisk kontra interaktiv routning och interaktiv routning och prerendering.

OnAfterRender{Async} händelser för komponentens livscykel anropas inte vid prerendering, bara efter att komponenten återges interaktivt.

Inaktivera förrendering

Prerendering kan komplicera en app eftersom appens komponenter måste återges Razor två gånger: en gång för prerendering och en gång för att konfigurera interaktivitet. Om komponenterna är konfigurerade att köras på WebAssembly måste du också utforma komponenterna så att de kan köras från både servern och klienten.

Om du vill inaktivera prerendering för en komponentinstansskickar du flaggan prerender med värdet false till återgivningsläget:

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

För att inaktivera prerendering i en komponentdefinition :

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

Om du vill inaktivera prerendering för hela appen anger du återgivningsläget på den interaktiva komponenten på högsta nivå i appens komponenthierarki som inte är en rotkomponent.

För appar som baseras på Blazor Web App projektmall anges ett återgivningsläge som tilldelats hela appen där komponenten Routes används i komponenten App (Components/App.razor). I följande exempel anges appens återgivningsläge till Interaktiv server med prerendering inaktiverad:

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

Inaktivera även prerendering för HeadOutlet-komponenten i komponenten App:

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

Det går inte att göra en rotkomponent, till exempel den App komponenten, interaktiv med @rendermode-direktivet överst i rotkomponentens definitionsfil (.razor). Därför kan prerendering inte inaktiveras direkt av komponenten App.

Inaktivering av prerendering med hjälp av föregående tekniker börjar bara gälla för återgivningslägen på den översta nivån. Om en överordnad komponent anger ett återgivningsläge ignoreras förinställningarna för dess underordnade komponenter.

Bevara fördefinierat tillstånd

Utan att det förgenererade tillståndet bevaras går tillståndet som används under förgenereringen förlorat och måste återskapas när appen är fullt inladdad. Om något tillstånd skapas asynkront kan användargränssnittet flimra när det förinstallerade användargränssnittet ersätts när komponenten återställs. Mer information om hur du bevarar tillstånd under prerendering finns i ASP.NET Core Blazor prerendered state persistence.

Tjänster på klientsidan misslyckas med att lösas under förredigering

Förutsatt att prerendering inte är inaktiverat för en komponent eller för appen, förinstalleras en komponent i .Client-projektet på servern. Eftersom servern inte har åtkomst till registrerade Blazor tjänster på klientsidan går det inte att mata in dessa tjänster i en komponent utan att få ett felmeddelande om att tjänsten inte kan hittas under förinläsningen.

Tänk dig till exempel följande Home-komponent i .Client-projektet i en Blazor Web App med global interaktiv WebAssembly eller interaktiv auto-rendering. Komponenten försöker mata in IWebAssemblyHostEnvironment för att hämta miljöns namn.

@page "/"
@inject IWebAssemblyHostEnvironment Environment

<PageTitle>Home</PageTitle>

<h1>Home</h1>

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

Inget kompileringstidsfel inträffar, men ett körningsfel inträffar under förinläsningen:

Det går inte att ange ett värde för egenskapen "Miljö" på typen "BlazorSample.Client.Pages".Home". Det finns ingen registrerad tjänst av typen "Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment".

Det här felet beror på att komponenten måste kompileras och köras på servern under förinläsningen, men IWebAssemblyHostEnvironment inte är en registrerad tjänst på servern.

Överväg någon av följande metoder för att hantera det här scenariot:

Registrera tjänsten på servern utöver klienten

Om tjänsten stöder serverkörning registrerar du tjänsten på servern utöver klienten så att den är tillgänglig under förinläsningen. Ett exempel på det här scenariot finns i vägledningen för HttpClient tjänster i avsnittet externa webb-API:er iBlazor Web App artikeln Anropa webb-API.

Mata in en tjänst som appen kan använda under prerendering

I vissa fall kan appen använda en tjänst på servern under förinläsningen och en annan tjänst på klienten.

Följande kod hämtar till exempel appens miljö oavsett om koden körs på servern eller på klienten genom att IHostEnvironment mata in från Microsoft.Extensions.Hosting.Abstractions NuGet-paketet:

private string? environmentName;

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

Den här metoden lägger dock till ytterligare ett beroende till klientprojektet som inte behövs.

Gör tjänsten valfri

Gör tjänsten valfri om den inte krävs under förinläsningen med någon av följande metoder.

I följande exempel används konstruktorinmatning av IWebAssemblyHostEnvironment:

private string? environmentName;

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

Du kan också mata in IServiceProvider för att eventuellt hämta tjänsten om den är tillgänglig:

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

Skapa en tjänstabstraktion

Om en annan tjänstimplementering behövs på servern skapar du en tjänstabstraktion och skapar implementeringar för tjänsten i server- och klientprojekten. Registrera tjänsterna i varje projekt. Mata in abstraktionen för anpassade tjänster i komponenter där det behövs. Komponenten beror sedan enbart på den anpassade tjänstens abstraktion.

När det gäller IWebAssemblyHostEnvironmentkan vi återanvända det befintliga gränssnittet i stället för att skapa ett nytt:

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

Registrera tjänsten i serverprojektets Program fil:

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

I det här läget IWebAssemblyHostEnvironment kan tjänsten matas in i en interaktiv WebAssembly- eller Auto-komponent som också är fördefinierad från servern.

Inaktivera prerendering för komponenten

Inaktivera prerendering för komponenten eller för hela appen. Mer information finns i avsnittet Inaktivera prerendering .