Intégrer ASP.NET composants Core Razor à MVC ou Razor Pages dans des solutions hébergées Blazor WebAssembly

Remarque

Les solutions hébergées Blazor WebAssembly restent prises en charge, mais le modèle de projet a été supprimé et n’est plus pris en charge dans .NET 8 ou version ultérieure. Cet article apparaît dans la table des matières jusqu’à .NET 7 pour référence, mais notez que .NET 7 est une version de terme de support standard qui n’est plus prise en charge.

Avertissement

Cette version d’ASP.NET Core n’est plus prise en charge. Pour plus d’informations, consultez la stratégie de support .NET et .NET Core.

Cet article explique les scénarios d’intégration des composants pour les applications hébergées Razor Blazor WebAssembly , y compris la préversion des Razor composants sur le serveur.

Important

Les modifications apportées à l’infrastructure dans les versions ASP.NET Core ont donné lieu à différents ensembles d’instructions dans cet article. Avant d’utiliser les instructions de cet article, vérifiez que le sélecteur de version de document en haut de cet article correspond à la version de ASP.NET Core que vous envisagez d’utiliser pour votre application.

Le prérendu peut 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 peuvent utiliser pour calculer l’ordre de priorité de la page.

Configuration de la solution

Configuration de du prérendu

Pour configurer le prérendu d’une application Blazor WebAssembly hébergée :

1. Hébergez l’application Blazor WebAssembly dans une application ASP.NET Core. Vous pouvez ajouter une application Blazor WebAssembly autonome à une solution ASP.NET Core ou utiliser une application Blazor WebAssembly hébergée créée à partir du modèle de projet Blazor WebAssembly avec l’option hébergée :

   • Visual Studio : cochez la case ASP.NET Core Hébergé dans la boîte de dialogue Informations supplémentaires lors de la création de l’applicationBlazor WebAssembly. Dans les exemples présentés dans cet article, la solution est nommée BlazorHosted.
   • Interpréteur de commandes CLI Visual Studio Code/.NET : dotnet new blazorwasm -ho (utilisez l’option -ho|--hosted). Utilisez l’option -o|--output {LOCATION} pour créer un dossier pour la solution et définir les espaces de noms du projet de la solution. Dans les exemples présentés dans cet article, la solution est nommée BlazorHosted (dotnet new blazorwasm -ho -o BlazorHosted).

   Pour les exemples présentés dans cet article, le nom de la solution hébergée (nom de l’assembly) est BlazorHosted. L’espace de noms du projet client est BlazorHosted.Client et l’espace de noms du projet serveur est BlazorHosted.Server.

2. Supprimez le fichier wwwroot/index.html du projet Blazor WebAssemblyClient.

3. Dans le projet Client, supprimez les lignes suivantes dans Program.cs :

   - builder.RootComponents.Add<App>("#app");
   - builder.RootComponents.Add<HeadOutlet>("head::after");
   

4. Ajoutez un fichier _Host.cshtml au dossier Pages du projet Server. Vous pouvez obtenir les fichiers depuis un projet créé à partir du modèle Blazor Server à l’aide de Visual Studio ou de l’interface CLI .NET avec la commande dotnet new blazorserver -o BlazorServer dans un interpréteur de commandes (l’option -o BlazorServer crée un dossier pour le projet). Après avoir placé les fichiers dans le dossier Pages du projet Server, faites les modifications suivantes aux fichiers.

   Apportez les modifications suivantes au fichier _Host.cshtml :

   • Mettez à jour l’espace de noms Pages en haut du fichier pour le faire correspondre à l’espace de noms des pages de l’application Server. L’espace réservé {APP NAMESPACE} dans l’exemple suivant représente l’espace de noms des pages de l’application donatrice qui ont fourni le fichier _Host.cshtml :

     Supprimer :

     - @namespace {APP NAMESPACE}.Pages
     

     Ajouter :

     @namespace BlazorHosted.Server.Pages
     

   • Ajoutez une directive @using pour le projet Client en haut du fichier :

     @using BlazorHosted.Client
     

   • Mettez à jour les liens de la feuille de style pour qu’ils pointent vers les feuilles de style du projet WebAssembly. Dans l’exemple suivant, l’espace de noms du projet client est BlazorHosted.Client. L’espace réservé {APP NAMESPACE} représente l’espace de noms de l’application donatrice qui a fourni le fichier _Host.cshtml. Mettez à jour l’assistance des balises de composant (balise <component>) pour le composant HeadOutlet pour le prérendu du composant.

     Supprimer :

     - <link href="css/site.css" rel="stylesheet" />
     - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" />
     - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
     

     Ajouter :

     <link href="css/app.css" rel="stylesheet" />
     <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
     

     Remarque

     Garder l’élément <link> qui demande la feuille de style Bootstrap (css/bootstrap/bootstrap.min.css) en place.

   • Mettez à jour la source de script Blazor pour utiliser le script Blazor WebAssembly côté client :

     Supprimer :

     - <script src="_framework/blazor.server.js"></script>
     

     Ajouter :

     <script src="_framework/blazor.webassembly.js"></script>
     

   • Mettez à jour le render-mode de l’assistance des balises de composant pour donner le prérendu la racine du composant App avec WebAssemblyPrerendered :

     Supprimer :

     - <component type="typeof(App)" render-mode="ServerPrerendered" />
     

     Ajouter :

     <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
     

     Important

     Le prérendu (« prerendering » en anglais) n’est pas pris en charge pour les points de terminaison d’authentification (segment de chemin /authentication/). Pour plus d’informations, consultez Autres scénarios de sécurité ASP.NET Core Blazor WebAssembly.

5. Dans le fichier Program.cs du projet Server, remplacez le point de terminaison de secours du fichier index.html par la page _Host.cshtml :

   Supprimer :

   - app.MapFallbackToFile("index.html");
   

   Ajouter :

   app.MapFallbackToPage("/_Host");
   

6. Si les projets Client et Server utilisent un ou plusieurs services courants pendant le prérendu, factorisez les inscriptions de service dans une méthode qui peut être appelée à partir des deux projets. Pour plus d’informations, consultez Injection de dépendances Blazor ASP.NET Core.

7. Exécutez le projet Server. L’application Blazor WebAssembly hébergée est prérendue par le projet Server pour les clients.

Configuration pour l’incorporation de Razor composants dans des pages ou des vues

Les sections et exemples suivants pour incorporer des Razor composants de l’application ClientBlazor WebAssembly dans des pages ou des vues de l’application serveur nécessitent une configuration supplémentaire.

Le projet Server doit contenir les fichiers et dossiers suivants.

Razor Pages :

• Pages/Shared/_Layout.cshtml
• Pages/Shared/_Layout.cshtml.css
• Pages/_ViewImports.cshtml
• Pages/_ViewStart.cshtml

MVC :

• Views/Shared/_Layout.cshtml
• Views/Shared/_Layout.cshtml.css
• Views/_ViewImports.cshtml
• Views/_ViewStart.cshtml

Les fichiers précédents peuvent être obtenus par la génération d’une application à partir des modèles de projet ASP.NET Core à l’aide des éléments suivants :

• Les nouveaux outils de création de projet de Visual Studio.
• L’ouverture d’un interpréteur de commandes et l’exécution de dotnet new webapp -o {PROJECT NAME} (Razor Pages) ou de dotnet new mvc -o {PROJECT NAME} (MVC). L’option -o|--output ayant une valeur pour l’espace réservé {PROJECT NAME} fournit un nom pour l’application et lui crée un dossier.

Mettez à jour les espaces de noms dans le fichier _ViewImports.cshtml importé pour les faire correspondre aux espaces de noms utilisés par le projet Server destinataire des fichiers.

Pages/_ViewImports.cshtml (Razor Pages) :

@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewImports.cshtml (MVC) :

@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Mettez à jour le fichier de disposition importé, qui est Pages/Shared/_Layout.cshtml pour Razor Pages ou Views/Shared/_Layout.cshtml pour MVC.

Commencez par supprimer le titre et la feuille de style du projet donateur, qui est RPDonor.styles.css dans l’exemple suivant. L’espace réservé {PROJECT NAME} représente le nom de l’application du projet donateur.

- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />

Incluez les styles du projet Client dans le fichier de disposition. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client. L’élément <title> peut être mis à jour simultanément.

Placez les lignes suivantes dans le contenu <head> du fichier de disposition :

<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

La disposition importée contient deux liens de navigation Home (Index page) et Privacy. Pour que les liens Home pointent vers l’application Blazor WebAssembly hébergée, modifiez les liens hypertexte :

- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Dans un fichier de disposition MVC :

- <a class="navbar-brand" asp-area="" asp-controller="Home" 
-     asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Mettez à jour le nom de l’application de l’élément <footer>. L’exemple suivant utilise le nom d’application BlazorHosted :

- &copy; {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ &copy; {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>

Dans l’exemple précédent, l’espace réservé {DATE} représente la date de copyright dans une application générée à partir du modèle de projet Razor Pages ou MVC.

Pour que le lien Privacy dirige vers une page privacy (Razor Pages), ajoutez une page privacy au projet Server.

Pages/Privacy.cshtml dans le projet Server :

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Pour une vue privacy basée sur MVC, créez une vue privacy dans le projet Server.

View/Home/Privacy.cshtml dans le projet Server :

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Dans le contrôleur Home de l’application MVC, retournez la vue.

Ajoutez le code suivant à Controllers/HomeController.cs :

public IActionResult Privacy()
{
    return View();
}

Si vous importez des fichiers à partir d’une application donatrice, veillez à mettre à jour tous les espaces de noms des fichiers pour les faire correspondre à ceux du projet Server (par exemple, BlazorHosted.Server).

Importez des ressources statiques dans le projet Server à partir du dossier wwwroot du projet donateur :

• Dossier et contenus wwwroot/css
• Dossier et contenus wwwroot/js
• Dossier et contenus wwwroot/lib

Si le projet donateur est créé à partir d’un modèle de projet ASP.NET Core et que les fichiers ne sont pas modifiés, vous pouvez copier le dossier wwwroot dans son intégralité depuis le projet donateur dans le projet Server et supprimer le fichier d’icônes favicon.

Warning

Évitez de placer la ressource statique à la fois dans les dossiers Client et Server wwwroot. Si le même fichier est présent dans les deux dossiers, une exception est levée parce que les ressources statiques partagent le même chemin racine web. Par conséquent, hébergez une ressource statique dans l’un des dossiers wwwroot, et non dans les deux.

Après avoir adopté la configuration précédente, incorporez des composants Razor dans des pages ou des vues du projet Server. Utilisez l’aide des sections suivantes de cet article :

• Afficher des composants dans une page ou une vue avec l’outil d’assistance des balises de composant
• Afficher les composants dans une page ou une vue à l’aide d’un sélecteur CSS

Afficher des composants dans une page ou une vue avec l’outil d’assistance des balises de composant

Après avoir configuré la solution, y compris la configuration supplémentaire, l’assistance des balises de composant prend en charge deux modes de rendu pour le rendu d’un composant à partir d’une application Blazor WebAssembly dans une page ou une vue :

• WebAssembly
• WebAssemblyPrerendered

Dans l’exemple Razor Pages suivant, le composant Counter est affiché dans une page. Pour que le composant devienne interactif, le script Blazor WebAssembly est inclus dans la section de rendu de la page. Pour éviter d’utiliser l’espace de noms complet du composant Counter avec l’assistance des balises de composant ({ASSEMBLY NAME}.Pages.Counter), ajoutez une directive @using pour l’espace de noms Pages du projet client. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client.

Dans le projet Server, Pages/RazorPagesCounter1.cshtml :

@page
@using BlazorHosted.Client.Pages

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Exécutez le projet Server. Accédez à la page Razor sur /razorpagescounter1. Le composant Counter prérendu est incorporé dans la page.

RenderMode configure si le composant :

• est prérendu dans la page.
• est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.

Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.

Un travail supplémentaire peut être nécessaire en fonction des ressources statiques utilisées par les composants et de l’organisation des pages de disposition dans une application. En général, des scripts sont ajoutés à la section de rendu Scripts d’une page ou d’une vie et des feuilles de style sont ajoutées au contenu d’un élément <head> d’une disposition.

Définir du contenu enfant par le biais d’un fragment de rendu

L’assistance des balises de composant ne prend pas en charge la réception d’un délégué RenderFragment pour le contenu enfant (par exemple, param-ChildContent="..."). Nous recommandons la création d’un composant Razor (.razor) qui fait référence au composant que vous souhaitez afficher avec le contenu enfant que vous souhaitez transmettre, puis d’appeler le composant Razor à partir de la page ou de la vue.

Veiller à ce que les composants prérendus de niveau supérieur ne soient pas supprimés lors de la publication

Si une assistance des balises de composant fait directement référence à un composant d’une bibliothèque soumise à la suppression lors de la publication, le composant peut être supprimé pendant la publication car aucune référence n’est faite à celui-ci à partir du code d’application côté client. Par conséquent, le composant n’est pas prérendu, ce qui laisse un emplacement vide dans la sortie. Si cela se produit, demandez au découpage de conserver le composant de bibliothèque en ajoutant un attribut DynamicDependency à n’importe quelle classe de l’application côté client. Pour conserver un composant appelé SomeLibraryComponentToBePreserved, ajoutez ce qui suit à n’importe quel composant :

@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All, 
    typeof(SomeLibraryComponentToBePreserved))]

L’approche précédente n’est généralement pas nécessaire, car dans la plupart des cas, l’application effectue un prérendu de ses composants (ceux qui ne sont pas supprimés), faisant référence à des composants à partir de bibliothèques (qui ne sont par conséquent pas supprimés non plus). Utilisez seulement DynamicDependency explicitement pour le prérendu d’un composant de bibliothèque directement lorsque la bibliothèque est soumise à la découpe.

Afficher les composants dans une page ou une vue à l’aide d’un sélecteur CSS

Après avoir configuré la solution, y compris la configuration supplémentaire, ajoutez des composants racines au projet Client d’une solution Blazor WebAssembly hébergée dans le fichier Program.cs. Dans l’exemple suivant, le composant Counter est déclaré en tant que composant racine avec un sélecteur CSS qui sélectionne l’élément avec le id correspondant à counter-component. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client.

Dans le fichier Program.cs du projet Client, ajoutez l’espace de noms des composants Razor du projet en haut du fichier :

using BlazorHosted.Client.Pages;

Une fois que builder est établi dans Program.cs, ajoutez le composant Counter en tant que composant racine :

builder.RootComponents.Add<Counter>("#counter-component");

Dans l’exemple Razor Pages suivant, le composant Counter est affiché dans une page. Pour que le composant devienne interactif, le script Blazor WebAssembly est inclus dans la section de rendu de la page.

Dans le projet Server, Pages/RazorPagesCounter2.cshtml :

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Exécutez le projet Server. Accédez à la page Razor sur /razorpagescounter2. Le composant Counter prérendu est incorporé dans la page.

Un travail supplémentaire peut être nécessaire en fonction des ressources statiques utilisées par les composants et de l’organisation des pages de disposition dans une application. En général, des scripts sont ajoutés à la section de rendu Scripts d’une page ou d’une vie et des feuilles de style sont ajoutées au contenu d’un élément <head> d’une disposition.

Remarque

L’exemple précédent lève un JSException si une application Blazor WebAssembly est prérendue et intégrée à une application Razor Pages ou MVC simultanément avec l’utilisation d’un sélecteur CSS. La navigation vers l’un des composants Razor du projet Client ou la navigation vers une page ou une vue de Server avec un composant incorporé lève une ou plusieurs JSException.

Il s’agit d’un comportement normal, car le prérendu et l’intégration d’une application Blazor WebAssembly avec des composants Razor routables sont incompatibles avec l’utilisation des sélecteurs CSS.

Si vous avez travaillé avec les exemples des sections précédentes et que vous souhaitez simplement voir le sélecteur CSS fonctionner dans votre exemple d’application, mettez en commentaire la spécification du composant racine App du Client fichier du projet Program.cs :

- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");

Accédez à la page ou à la vue comportant le composant Razor intégré qui utilise un sélecteur CSS (par exemple, le /razorpagescounter2 de l’exemple précédent). La page ou la vue se charge avec le composant incorporé et celui-ci fonctionne comme prévu.

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 configuré de manière asynchrone, l’interface utilisateur peut scintiller, car l’interface utilisateur prérendue est remplacée par des espaces réservés temporaires avant d’être entièrement affichée.

Pour conserver l’état des composants prérendus, utilisez le Tag Helper Persist Component State (source de référence). Ajoutez la balise du Tag Helper, <persist-component-state />, à la balise fermante </body> de la page _Host dans une application qui affiche au préalable les composants.

Notes

Les liens de documentation vers la source de référence .NET chargent généralement la branche par défaut du référentiel, qui représente le développement actuel pour la prochaine version de .NET. Pour sélectionner une balise pour une version spécifique, utilisez la liste déroulante Échanger les branches ou les balises. Pour plus d’informations, consultez Comment sélectionner une balise de version du code source ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Dans Pages/_Host.cshtml les Blazor applications qui sont prédéfinies WebAssembly (WebAssemblyPrerendered) dans une application hébergée Blazor WebAssembly :

<body>
    ...

    <persist-component-state />
</body>

Déterminez l’état à conserver à l’aide du service PersistentComponentState. PersistentComponentState.RegisterOnPersisting enregistre un rappel pour conserver l’état du composant avant que l’application ne soit suspendue. L’état est récupéré lorsque l’application reprend.

Dans l’exemple suivant :

• L’espace réservé {TYPE} représente le type de données à conserver (par exemple WeatherForecast[]).
• L’espace réservé {TOKEN} est une chaîne de l’identificateur d’état (par exemple fetchdata).

@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

L’exemple suivant est une version mise à jour du composant FetchData dans une application Blazor WebAssembly hébergée basée sur le modèle de projet Blazor. Le composant WeatherForecastPreserveState conserve l’état des prévisions météorologiques pendant le prérendu, puis récupère l’état pour initialiser le composant. L’assistance des balises d’état du composant persistant conserve l’état du composant après tous les appels de composant.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

En initialisant des composants avec le même état que celui utilisé durant le prérendu, toutes les étapes d’initialisation coûteuses ne sont exécutées qu’une seule fois. L’interface utilisateur rendue correspond également à l’interface utilisateur prérendue, de sorte qu’aucun scintillement ne se produit dans le navigateur.

L’état préréenderé persistant est transféré au client, où il est utilisé pour restaurer l’état du composant. Pour la préversion dans une application hébergée Blazor WebAssembly , les données sont exposées au navigateur et ne doivent pas contenir d’informations sensibles et privées.

Ressources Blazor WebAssembly supplémentaires

• Gestion de l’état : gérer le prérendu
• Prise en charge du prérendu avec chargement différé de l’assembly
• Sujets de cycle de vie des composants Razor qui se rapportent au prérendu
  • Initialisation des composants (OnInitialized{Async})
  • Après le rendu de composant (OnAfterRender{Async})
  • Reconnexion avec état après le prérendu : bien que le contenu de la section se concentre sur Blazor Server et la reconnexion SignalR avec état, le scénario de prérendu dans les applications Blazor WebAssembly hébergées (WebAssemblyPrerendered) implique des conditions et approches similaires pour empêcher l’exécution du code du développeur deux fois. Pour conserver l’état pendant l’exécution du code d’initialisation lors du prérendu, consultez Conserver l’état prérendu.
  • Prérendu avec l’interopérabilité JavaScript
• Sujets d’authentification et d’autorisation relatifs au prérendu
  • Aspects généraux
  • Prérendu avec authentification dans les applications hébergées Blazor WebAssembly
• Héberger et déployer : Blazor WebAssembly
• Gérer les erreurs : prérendu
• OnNavigateAsync est exécuté deux fois lors du prérendu : gérer les événements de navigation asynchrone avec OnNavigateAsync