Prérendre des composants ASP.NET Core Razor

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 10 de cet article.

Cet article explique les scénarios de prérendu des composants Razor pour les composants rendus côté serveur dans les applications Blazor Web App et Blazor Server.

Le pré-rendu 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é-rendu 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.

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

Désactiver le pré-rendu

Le prérendu peut compliquer une application, car les composants Razor de l’application doivent être rendus deux fois : une première fois pour le prérendu, puis une seconde fois pour configurer 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 à la fois côté serveur et côté 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érendu, consultez persistance de l’état prérendu d’ASP.NET 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

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 un exemple de ce scénario, consultez les recommandations relatives aux services HttpClient dans la section API web externes d’une application web Blazor Web App de l'article Appeler une API web.

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

Rendez le service facultatif s’il n’est pas requis lors du prérendu, en utilisant l’une des approches suivantes.

L’exemple suivant utilise l’injection par 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 service IWebAssemblyHostEnvironment peut être injecté dans un composant WebAssembly interactif ou Auto, également prérendu à partir du serveur.

Désactiver le prérendering pour le composant

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

  • Dernière mise à jour :