Prérendre des composants ASP.NET Core Razor

Cet article explique les scénarios Razor de prérémenage des composants pour les composants rendus sur le serveur dans les applications et Blazor Web App les Blazor Serverapplications.

La préversion est le processus de rendu statique du contenu de page à partir du serveur pour fournir du code HTML au navigateur le plus rapidement possible. Une fois le contenu prérémencé affiché rapidement à l’utilisateur, le contenu interactif avec des gestionnaires d’événements actifs est rendu, en remplaçant tout contenu qui a été rendu précédemment. Le prérendu peut également améliorer l’optimisation du référencement d’un site auprès d’un moteur de recherche (SEO) en affichant le contenu de la réponse HTTP initiale utilisée par les moteurs de recherche pour calculer l’ordre de priorité de la page.

Le pré-rendu est activé par défaut pour les composants interactifs.

La navigation interne avec le routage interactif n’utilise pas de prérendering, car la page est déjà interactive. Pour plus d’informations, consultez Routage statique et routage interactif et routage interactif et prérendering.

OnAfterRender{Async} Les événements de cycle de vie des composants ne sont pas appelés lors de la préversion, uniquement après le rendu interactif du composant.

Désactiver le prérendering

La préversion peut compliquer une application, car les composants de l’application Razor doivent s’afficher deux fois : une fois pour le préréendering et une fois pour la configuration de l’interactivité. Si les composants sont configurés pour s’exécuter sur WebAssembly, vous devez également concevoir vos composants afin qu’ils puissent s’exécuter à partir du serveur et du client.

Pour désactiver le prérendu pour une instance de composant, transmettez l'indicateur prerender avec une valeur de false au mode de rendu :

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

Pour désactiver le prérendu dans une définition de composant :

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

Pour désactiver le prérendu pour l’ensemble de l’application, indiquez le mode de rendu au composant interactif de niveau le plus élevé dans la hiérarchie des composants de l’application qui n’est pas un composant racine.

Pour les applications basées sur le modèle de projet d’Blazor Web App, un mode de rendu affecté à l’ensemble de l’application est spécifié, où le composant Routes est utilisé dans le composant App (Components/App.razor). L’exemple suivant montre comment définir le mode de rendu de l’application sur Interactive Server avec désactivation du prérendu :

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

Désactivez également le prérendu pour le composant HeadOutlet dans le composant App :

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

Le fait de rendre un composant racine, tel que le composant App, interactif avec la directive @rendermode en haut du fichier de définition du composant racine (.razor) n’est pas pris en charge. Par conséquent, le pré-rendu ne peut pas être désactivé directement par le composant App.

La désactivation du prérendering à l’aide des techniques précédentes prend uniquement effet pour les modes de rendu de niveau supérieur. Si un composant parent spécifie un mode de rendu, les paramètres de prérendu de ses enfants sont ignorés.

Conserver l’état prérendu

Si l’état utilisé durant le prérendu n’est pas conservé, il est perdu et doit être recréé lorsque l’application est entièrement chargée. Si un état est créé de manière asynchrone, l'interface utilisateur peut scintiller car l'interface prérendu est remplacée lorsque le composant est rendu. Pour obtenir des conseils sur la persistance de l’état pendant le pré-endering, consultez ASP.NET persistance de l’état préréenderé CoreBlazor.

Les services côté client ne sont pas résolus pendant le prérendu.

En supposant que le prérendu n'est pas désactivé pour un composant ou pour l'application, un composant du projet .Client est prérendu sur le serveur. Le serveur n’ayant pas accès aux services Blazor côté client inscrits, il n’est pas possible d’injecter ces services dans un composant sans recevoir d’erreur indiquant que le service n’a pas pu être trouvé lors du prérendu.

Par exemple, considérez le composant Home suivant dans le projet .Client d’une Blazor Web App avec global Interactive WebAssembly ou Interactive Auto rendering. Le composant tente d’injecter IWebAssemblyHostEnvironment pour obtenir le nom de l’environnement.

@page "/"
@inject IWebAssemblyHostEnvironment Environment

<PageTitle>Home</PageTitle>

<h1>Home</h1>

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

Aucune erreur de temps de compilation ne se produit, mais une erreur d'exécution se produit pendant le pré-rendu.

Impossible de fournir une valeur pour la propriété « Environment » sur le type « BlazorSample.Client.Pages.Home ». Il n’existe aucun service inscrit de type « Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment ».

Cette erreur se produit, car le composant doit compiler et s’exécuter sur le serveur pendant le prérendu, mais IWebAssemblyHostEnvironment n’est pas un service inscrit sur le serveur.

Tenez compte de l’une des approches suivantes pour résoudre ce scénario :

• Inscrire le service sur le serveur en plus du client
• Injecter un service que l’application peut utiliser lors de la préversion
• Rendre le service facultatif
• Créer une abstraction de service
• Désactiver le prérendering pour le composant

Inscrire le service sur le serveur en plus du client

Si le service prend en charge l’exécution du serveur, inscrivez le service sur le serveur en plus du client afin qu’il soit disponible pendant la préversion. Pour obtenir un exemple de ce scénario, consultez les conseils pour HttpClient les services dans la Blazor Web App section API web externes de l’article Sur l’API web d’appel .

Injecter un service que l’application peut utiliser lors de la préversion

Dans certains cas, l’application peut utiliser un service sur le serveur pendant la préversion et un autre service sur le client.

Par exemple, le code suivant obtient l’environnement de l’application, que le code s’exécute sur le serveur ou sur le client en injectant IHostEnvironment à partir du Microsoft.Extensions.Hosting.Abstractions package NuGet :

private string? environmentName;

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

Toutefois, cette approche ajoute une dépendance supplémentaire au projet client qui n’est pas nécessaire.

Rendre le service facultatif

Faites en sorte que le service soit facultatif s’il n’est pas nécessaire lors du pré-rendu à l’aide de l’une des approches suivantes.

L’exemple suivant utilise l’injection de constructeur de IWebAssemblyHostEnvironment:

private string? environmentName;

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

Vous pouvez également injecter IServiceProvider pour obtenir éventuellement le service s’il est disponible :

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

Créer une abstraction de service

Si une autre implémentation de service est nécessaire sur le serveur, créez une abstraction de service et créez des implémentations pour le service dans les projets serveur et client. Inscrivez les services dans chaque projet. Injectez l’abstraction de service personnalisé dans les composants là où c'est nécessaire. Le composant dépend ensuite uniquement de l’abstraction de service personnalisé.

Dans le cas de IWebAssemblyHostEnvironment, nous pouvons réutiliser l’interface existante au lieu de créer une nouvelle interface :

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

Dans le fichier du Program projet de serveur, inscrivez le service :

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

À ce stade, le IWebAssemblyHostEnvironment service peut être injecté dans un composant WebAssembly interactif ou Auto qui est également pré-rendu à partir du serveur.

Désactiver le prérendering pour le composant

Désactivez le préréendering pour le composant ou pour l’ensemble de l’application. Pour plus d’informations, consultez la section Désactiver le prérendering .