Les modes de rendu Blazor expliqués —

Dans un article précédentnous avons brièvement expliqué les changements à venir dans les modes de rendu Blazor .NET8, qui vous permettent de spécifier par page Razor ou composant individuel si cette page ou ce composant serait rendu sur le serveur (WebSocket), sur le client (WebAssembly) ou dans mode automatique (rendu interactif côté serveur lors de la première visite, puis sur le client).

Les modes de rendu ayant été introduits dans la version finale de Blazor, examinons plus en détail les différentes options du mode de rendu et comment les utiliser dans votre application.

Récapitulatif de Blazor

Blazer est un framework Web gratuit et open source qui permet aux développeurs de créer des applications Web en utilisant C# et HTML. Il est développé par Microsoft et fait partie de l’écosystème .NET. Blazor propose deux modèles d’hébergement : Blazor Server et Blazor WebAssembly. Blazor Server offre un moyen de créer des interfaces utilisateur Web en utilisant C# au lieu de JavaScript. Les applications Blazor Server sont hébergées sur le serveur et utilisent la communication en temps réel via SignalR pour gérer les mises à jour de l’interface utilisateur. Blazor WebAssembly, quant à lui, profite de Assemblage Web pour tout faire dans le navigateur.

Modes de rendu Blazor

Dans .NET 8, Blazor a introduit plusieurs améliorations, notamment la possibilité de choisir le mode de rendu des composants au moment de l’exécution. Cela signifie que les développeurs peuvent désormais ajouter une interactivité client par composant ou page et générer du contenu HTML statique avec des composants. De plus, Blazor dans .NET 8 a amélioré l’authentification, la possibilité d’acheminer vers un élément nommé et la capacité de surveiller l’activité du circuit.

Le attribut du mode de rendu est utilisé pour définir où un composant de niveau racine doit être rendu. L’option RenderMode indique la manière dont le composant doit être rendu. Il existe plusieurs options RenderMode prises en charge, notamment Server, ServerPrerended et Static. Le mode serveur est rendu de manière interactive une fois qu’une connexion avec le navigateur est établie. Le mode ServerPrerended est d’abord pré-rendu, puis rendu de manière interactive. Le mode statique est rendu sous forme de contenu statique.

Chaque composant d’une application Web Blazor s’appuie sur un mode de rendu spécifique pour déterminer le modèle d’hébergement qu’il utilise, où il est rendu et s’il est interactif ou non. Pour appliquer un mode de rendu à un composant, utilisez le @rendermode directive sur l’instance du composant ou sur la définition du composant.

Le serveur statique et le serveur interactif sont appelés mode de rendu serveur. Interactive WebAssembly est connu sous le nom de mode de rendu client. L’option Auto démarre à partir du serveur, est mise en cache, puis lors des visites ultérieures, elle est redirigée sur le client. Cela permet d’économiser de la bande passante et signifie des temps de chargement plus rapides.

Activer la prise en charge des modes de rendu interactifs (serveur et client)

Lorsque vous développez une application Web .Blazor, vous, en tant que développeur, devez configurer les modes de rendu interactifs. Lorsque vous démarrez à partir du modèle de projet fourni (avec des exemples de données ou vide, cela n’a pas d’importance), le modèle dispose automatiquement des extensions suivantes :

Extensions du générateur de composants:

• AddInteractiveServerComponents ajoute des services pour prendre en charge le rendu des composants Interactive Server.
• AddInteractiveWebAssemblyComponents ajoute des services pour prendre en charge le rendu des composants Interactive WebAssembly.
• MapRazorComponents découvre les composants disponibles et spécifie le composant racine de l’application (le premier composant chargé), qui est par défaut le composant App (App.razor).

Extensions du générateur de conventions de point de terminaison:

• AddInteractiveServerRenderMode configure le rendu interactif côté serveur (SSR interactif) pour l’application.
• AddInteractiveWebAssemblyRenderMode configure le mode de rendu Interactive WebAssembly pour l’application.

Les composants individuels doivent toujours déclarer leur mode de rendu une fois les services de composants et les points de terminaison configurés dans le fichier programme de l’application. On pourrait dire qu’il y a une partie de configuration du projet (dans le Program.cs fichier) dans lequel vous avez spécifié le mode de rendu global du projet, après quoi vous devez toujours spécifier le mode de rendu de la page ou du composant individuel.

Utilisation du mode de rendu dans un exemple d’application

Une fois la partie théorique terminée, laissez-nous vous guider à travers un exemple étape par étape sur la façon d’expérimenter les différents modes de rendu. Nous partirons du modèle Blazor Server Web App par défaut dans Visual Studio, après quoi nous ajouterons le projet Blazor WebAssembly et démontrerons les options du mode de rendu pour un bouton interactif.

1. Assurez-vous d’avoir la dernière version de Visual Studio 2022 (17.8.x ou supérieur) installé, avec le SDK .NET 8.
2. Dans Visual Studio, sélectionnez Créer un nouveau projet et rechercher Blazer; cela affichera plusieurs options différentes parmi lesquelles choisir.
3. Sélectionner Application serveur Blazor comme modèle ; Cliquez sur Suivant
   
4. Donnez un nom à votre projet, par exemple BlazorRenderModes
5. Dans le Informations Complémentaires page, fournissez les paramètres suivants :
   • Cadre: .NET 8.0 (support à long terme)
   • Type d’authentification : Aucune
   • Configurer pour HTTPS : sélectionné
   • Mode de rendu interactif : Serveur
   • Lieu d’interactivité : Par page/composant
     
     Remarque : comme vous pouvez le constater, l’assistant de projet pour Blazor a déjà été mis à jour avec les options du mode de rendu..
6. Depuis le projet, ouvrez le Program.cs fichier et vérifiez les points suivants :

   
    builder.Services.AddRazorComponents()
        .AddInteractiveServerComponents().

   
   Cela clarifie ce que nous avons expliqué plus tôt dans les extensions Component Builder, où notre application Blazor Server est maintenant prête à utiliser le mode de rendu interactif du serveur.

7. Un peu plus bas dans le même Program.cs fichier, vous trouvez ce qui suit :

   app.MapRazorComponents()
        .AddInteractiveServerRenderMode();

   
   Cela clarifie ce que nous avons expliqué plus tôt dans le MapRazorComponentoù notre application Blazor Server est maintenant prête à utiliser le mode de rendu interactif du serveur.

8. Pour ajouter un composant interactif à notre application, ajoutons un exemple de code au Home.razor page.

   @page "https://www.sitepoint.com/"<PageTitle>Home</PageTitle>
   
   This button demonstrates the use of Blazor Interactive Server Render Mode
   
   <button @onclick="Unlocked">Unlock Interactive Render Mode</button>
   
   <span>@unlockmessage</span>@code {
       string unlockmessage = "";
       void Unlocked()
       {
           unlockmessage = "Interactive Render Mode Unlocked";
       }
   
   
   }

9. Le @page la syntaxe est l’itinéraire de Blazor vers une page, dans ce cas la page d’accueil. Ceci est suivi d’un langage HTML simple, affichant du texte, un bouton et un élément de texte dans l’objet HTML «  ».
10. 1Le @code La section contient le langage C#, tout comme dans une page Web ASP.NET traditionnelle, qui affiche un message texte lorsque l’utilisateur clique sur le bouton.
11. Sauvegarder le code et Courir L’application.
    
12. Si vous cliquez sur le bouton, vous pourriez être surpris que rien ne se passe. Comme tout semble OK. Cependant, rappelez-vous que nous avons spécifié notre projet Blazor pour Mode de rendu du serveur interactifce qui signifie que nous devons apporter une mise à jour mineure à l’élément bouton, pour le rendre interactif.
13. Revenez au code et mettez à jour le Home.razor fichier et, sur la deuxième ligne, juste en dessous du @page ligne, ajoutez ce qui suit :

    @rendermode InteractiveServer

14. Lorsque vous exécutez à nouveau l’application et cliquez sur le bouton, le message texte apparaîtra joliment ! Bon travail!
    
15. Ouverture du Outils de diagnostic du navigateur (Inspecter)et en vérifiant le Réseau nous montre également qu’il s’agit d’une connexion Websocket active.
    
16. Maintenant, rappelez-vous, le mode de rendu peut être spécifié par page ou par composant. (Si vous vous demandez ce qu’est un composant Blazor, pensez à une section d’une page Web, comme un bouton, un formulaire, une grille,… qui pourrait être chargée en tant qu’élément distinct). Pour montrer comment cela peut être appliqué à un composant, mettez à jour votre Home.razor déposer comme suit :

    @page "https://www.sitepoint.com/"
    
     @*
     @rendermode InteractiveServer 
     *@
    

    où le @* *@ signifie « commenter ».
    Ensuite, ajoutez la table Météo à la mise en page de la page d’accueil, qui est techniquement une page distincte. Weather.razoren tant qu’objet utilisant la syntaxe de code mise à jour :

    <span>@unlockmessage</span>
    
    <Weather @rendermode=InteractiveServer/>
    
    @code {
        string unlockmessage = "";

17. Comme précédemment, nous chargeons maintenant la page, en utilisant le rendu statique côté serveur traditionnel, mais en spécifiant d’utiliser le Mode de rendu du serveur interactif pour le Weather composant.
18. Enregistrer et Courir l’application à nouveau. Vous verrez que le bouton précédent ne fait plus rien lorsque vous cliquez dessus, mais les informations météo se chargent correctement.

Dans un prochain article, nous réutiliserons cet exemple de Blazor Web App et présenterons InteractiveWebAssembly pour le rendu côté client.

Résumé

En résumé, le nouveau mode de rendu Blazor .NET8 offre aux développeurs plus de flexibilité et de contrôle sur la façon dont leurs composants sont rendus, permettant ainsi d’améliorer les performances et l’interactivité de leurs applications Web.