Freigeben über

Vorabrendern von ASP.NET Core Razor-Komponenten

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 10-Version dieses Artikels.

In diesem Artikel werden Komponentenvorderenderungsszenarien für vom Server gerenderte Komponenten in Razors und Blazor Web App Apps erläutertBlazor Server.

Prerendering ist der Prozess des statischen Renderns von Seiteninhalten vom Server, um HTML so schnell wie möglich an den Browser zu übermitteln. Nachdem der vorab gerenderte Inhalt dem Benutzer schnell angezeigt wird, werden interaktive Inhalte mit aktiven Ereignishandlern gerendert, wobei alle zuvor gerenderten Inhalte ersetzt werden. Prerendering kann auch die Suchmaschinenoptimierung (SEO) verbessern, indem Inhalte für die anfängliche HTTP-Antwort gerendert werden, die Suchmaschinen zum Berechnen des Seitenrangs verwenden.

Die Vorabrendering ist standardmäßig für interaktive Komponenten aktiviert.

Die interne Navigation mit interaktivem Routing verwendet keine Vorabausführung, da die Seite bereits interaktiv ist. Weitere Informationen finden Sie unter Static versus interactive routing and Interactive routing and prerendering.

OnAfterRender{Async} Komponentenlebenszyklusereignisse werden nicht aufgerufen, wenn sie vorab gerendert werden, nur nachdem die Komponente interaktiv gerendert wurde.

Vorschreiben deaktivieren

Die Voreinstellung kann eine App komplizierter machen, da die Komponenten der App Razor zweimal gerendert werden müssen: einmal für das Vorabenderen und einmal zum Einrichten der Interaktivität. Wenn die Komponenten für die Ausführung auf WebAssembly eingerichtet sind, müssen Sie ihre Komponenten auch so entwerfen, dass sie sowohl vom Server als auch vom Client ausgeführt werden können.

Um das Prerendering für eine Komponenteninstanz zu deaktivieren, übergeben Sie das Flag prerender mit dem Wert false an den Rendermodus:

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

So deaktivieren Sie das Prerendering in einer Komponentendefinition:

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

Um das Prerendering für die gesamte App zu deaktivieren, geben Sie den Rendermodus für die interaktive Komponente der höchsten Ebene in der App-Hierarchie an, die keine Stammkomponente ist.

Bei Anwendungen, die auf der Blazor Web App-Projektvorlage basieren, wird ein Rendermodus, der der gesamten Anwendung zugewiesen wird, dort angegeben, wo die Routes-Komponente in der App-Komponente (Components/App.razor) verwendet wird. Im folgenden Beispiel wird der Rendermodus der App auf „Interaktiver Server“ festgelegt, wobei das Prerendering deaktiviert wird:

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

Deaktivieren Sie außerdem das Prerendering für die HeadOutlet-Komponente in der App-Komponente:

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

Die Interaktivität einer Stammkomponente wie der App-Komponente mit der @rendermode-Anweisung oben in der Definitionsdatei der Stammkomponente (.razor) wird nicht unterstützt. Daher kann das Prerendering nicht direkt von der App-Komponente deaktiviert werden.

Das Deaktivieren des Vorabdeenderings mit den vorherigen Techniken wird nur für Rendermodi der obersten Ebene wirksam. Wenn eine übergeordnete Komponente einen Rendermodus angibt, werden die Vorabrendering-Einstellungen der untergeordneten Elemente ignoriert.

Beibehalten des vorab gerenderten Zustands

Ohne Beibehaltung des vorab gerenderten Zustands geht der Zustand verloren, der während des Vorabrenderings verwendet wird, und muss neu erstellt werden, wenn die App vollständig geladen ist. Wenn ein Zustand asynchron erstellt wird, flackert die Benutzeroberfläche möglicherweise, da die vorab gerenderte Benutzeroberfläche ersetzt wird, wenn die Komponente erneut gerendert wird. Anleitungen zum Beibehalten des Zustands während der Vorrenderung finden Sie unter ASP.NET vorrenderten Zustandspersistenz von CoreBlazor.

Clientseitige Dienste können während des Prerendering nicht aufgelöst werden.

Sofern das Prerendering nicht für eine Komponente oder die App deaktiviert ist, wird eine Komponente im .Client-Projekt auf dem Server vorab gerendert. Weil der Server keinen Zugriff auf registrierte clientseitige Blazor-Dienste hat, ist es nicht möglich, diese Dienste in eine Komponente einzufügen, ohne einen Fehler zu erhalten, der besagt, dass der Dienst während des Prerendering nicht gefunden wird.

Betrachten Sie z. B. die folgende Home-Komponente im .Client-Projekt in einer Blazor Web App mit globaler interaktiver WebAssembly oder interaktivem automatischen Rendering. Die Komponente versucht, IWebAssemblyHostEnvironment einzufügen, um den Namen der Umgebung abzurufen.

@page "/"
@inject IWebAssemblyHostEnvironment Environment

<PageTitle>Home</PageTitle>

<h1>Home</h1>

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

Es tritt kein Fehler zur Kompilierungszeit auf, während des Prerendering tritt jedoch ein Laufzeitfehler auf:

Für die Eigenschaft „Environment“ des Typs „BlazorSample.Client.Pages.Home“ kann kein Wert angegeben werden. Es gibt keinen registrierten Dienst vom Typ ‚Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment‘.

Dieser Fehler tritt auf, weil die Komponente während des Prerendering kompiliert und auf dem Server ausgeführt werden muss, aber IWebAssemblyHostEnvironment kein registrierter Dienst auf dem Server ist.

Berücksichtigen Sie einen der folgenden Ansätze, um dieses Szenario zu beheben:

Registrieren des Diensts auf dem Server zusätzlich zum Client

Wenn der Dienst die Serverausführung unterstützt, registrieren Sie den Dienst zusätzlich zum Client, damit er während der Vorausschreibung verfügbar ist. Ein Beispiel für dieses Szenario finden Sie in den Anleitungen für HttpClient Dienste im Blazor Web App Abschnitt "Externe Web-APIs " des Artikels "Call web API" .

Einfügen eines Diensts, den die App während der Vorrenderung verwenden kann

In einigen Fällen kann die App einen Dienst auf dem Server während des Prerendering und einen anderen Dienst auf dem Client verwenden.

Der folgende Code ruft beispielsweise die Umgebung der App ab, unabhängig davon, ob der Code auf dem Server oder auf dem Client ausgeführt wird, indem er aus dem IHostEnvironment eingefügt Microsoft.Extensions.Hosting.Abstractions wird:

private string? environmentName;

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

Dieser Ansatz fügt dem Clientprojekt jedoch eine zusätzliche Abhängigkeit hinzu, die nicht benötigt wird.

Dienst optional machen

Stellen Sie den Dienst optional fest, wenn er während der Vorrenderung nicht erforderlich ist, indem Sie eine der folgenden Ansätze verwenden.

Im folgenden Beispiel wird die Konstruktorinjektion von IWebAssemblyHostEnvironment verwendet:

private string? environmentName;

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

Alternativ können IServiceProvider Sie den Dienst optional abrufen, wenn er verfügbar ist:

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

Erstellen einer Dienstabstraktion

Wenn eine andere Dienstimplementierung auf dem Server erforderlich ist, erstellen Sie eine Dienststraktion, und erstellen Sie Implementierungen für den Dienst in den Server- und Clientprojekten. Registrieren Sie die Dienste in jedem Projekt. Fügen Sie die benutzerdefinierte Dienstabstraktion in die Komponenten ein, wo nötig. Die Komponente hängt dann ausschließlich von der benutzerdefinierten Dienstabstraktion ab.

Im Fall von IWebAssemblyHostEnvironment, können wir die vorhandene Schnittstelle wiederverwenden, anstatt eine neue zu erstellen:

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

Registrieren Sie den Dienst in der Datei des Serverprojekts Program :

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

An diesem Punkt kann der IWebAssemblyHostEnvironment Dienst in eine interaktive WebAssembly- oder Autokomponente eingefügt werden, die ebenfalls vom Server vorrendert wird.

Prerendering für die Komponente deaktivieren

Deaktivieren Sie das Vor-Rendering für die Komponente oder die gesamte Anwendung. Weitere Informationen finden Sie im Abschnitt " Prerendering deaktivieren" .

  • Last updated on