La navigation améliorée de Blazor entièrement expliquée

Grâce à une amélioration progressive utilisant une navigation et une gestion des formulaires améliorées, Blazor est capable de minimiser les temps de chargement des pages et d’équilibrer les performances tout en minimisant les compromis.

Dans .NET8, Microsoft a amélioré les performances et l’expérience utilisateur de Blazor en introduisant des fonctionnalités de rendu statique côté serveur (Static SSR). Avec le SSR statique, les applications Blazor adoptent une stratégie d’amélioration progressive en rendant des pages et des formulaires HTML non interactifs traditionnels qui évoluent progressivement vers une interactivité totale. Dans cet article, nous explorerons la fonctionnalité améliorée de navigation et de gestion des formulaires qui comble le fossé entre les pages statiques et interactives.

SSR statique et amélioration progressive

Avant .NET 8, les développeurs Blazor devaient choisir entre deux modes d’interactivité distincts en utilisant soit Blazor WebAssembly ou Serveur Blazor (WebSockets). Chaque mode d’interactivité comporte ses propres compromis en termes de performances. Les applications utilisant Blazor WebAssembly doivent télécharger des ressources supplémentaires avant que les pages puissent devenir interactives, ce qui ralentit les temps de démarrage initiaux. Choisir Blazor Server signifie que les applications démarrent rapidement mais doivent maintenir une connexion WebSocket à tout moment.

Aucune des deux options n’étant idéale, dans .NET 8, Microsoft a introduit le SSR statique et l’amélioration progressive pour combler le fossé et réduire le compromis entre chaque option. De plus, les modes d’interactivité sont non seulement facultatifs, mais peuvent être définis par page et par composant.

Pour plus de détails sur les modes d’interactivité, voir, Premiers pas avec les nouveaux modes de rendu de Blazor dans .NET 8.

Depuis l’introduction d’ASP.NET MVC, Vues de rasoir (.cshtml) ont été rendus statiquement au format HTML avec rapidité et efficacité. Cependant, il existe une différence d’implémentation notable entre Razor Views et Composants du rasoir (.le rasoir). Les vues Razor ont été créées dans le but de restituer une chaîne HTML, tandis que les composants Razor ont été conçus pour refléter le DOM du navigateur en tant que Arbre de rendu. L’objet RenderTree est utilisé avec une opération de comparaison pour effectuer des mises à jour DOM. La conception initiale de Razor Components n’était pas destinée au rendu statique, mais à l’interactivité. Avec ASP.NET dans .NET 8, les composants Razor peuvent également être rendus statiquement de manière similaire aux vues Razor. Cela signifie qu’avec .NET 8, les applications Blazor peuvent exploiter la vitesse d’ASP.NET via SSR statique.

Avec le SSR statique, les pages sont livrées au navigateur au format HTML et agissent comme des pages HTML traditionnelles. Les pages rendues statiques ne sont pas interactives et effectueront un HTTP POST complet pour charger de nouvelles pages ou effectuer des soumissions de formulaires. Static SSR échange l’expérience utilisateur transparente d’un demande d’une seule page (SPA) pour la rapidité et la simplicité. Au lieu de créer un autre choix de rendu qui conduit à un compromis négatif, Blazor utilise une amélioration progressive pour créer une échelle mobile entre le HTML statique et le SPA complet.

Modes d’interactivité

Le sujet de la navigation améliorée et de la gestion des formulaires s’applique uniquement aux pages utilisant le SSR statique. Les pages ou applications qui définissent un mode interactif utiliseront la navigation et l’interactivité du SPA pour obtenir les mêmes résultats.

Navigation améliorée

L’utilisation de pages SSR statiques introduit le problème classique des actualisations de page complète. Lorsque les utilisateurs interagissent avec une page statique, le navigateur doit afficher une nouvelle page entière, même pour la plus petite mise à jour. De plus, cela peut entraîner une perte de position de défilement des formulaires et éventuellement un clignotement momentané d’un écran vide lors du chargement de la nouvelle page.

La navigation améliorée adopte une approche incrémentielle pour résoudre ce problème sans nécessiter une implémentation complète du SPA. La navigation améliorée de Blazor utilise le code JavaScript côté client inclus dans blazor.web.js pour intercepter les requêtes de navigation, récupérer la nouvelle page et corriger les modifications dans le DOM.

La navigation améliorée de Blazor est activée par défaut et activée lorsque le Application Web Blazor scénario blazor.web.js est utilisé. La navigation améliorée n’est pas incluse dans le script Blazor Server blazor.server.js ou le script Blazor WebAssembly blazor.webassembly.js. Lorsque la navigation améliorée est activée, l’application Blazor effectuera les actions suivantes :

1. Interception: Lorsqu’une demande est adressée à une ressource compatible Blazor, Blazor l’intercepte. Si la destination est un point de terminaison non-Blazor, la navigation améliorée ne s’applique pas, et le JavaScript côté client réessaye sous forme de chargement d’une page complète. Cela évite toute confusion dans le framework concernant les pages externes qui ne doivent pas être corrigées dans une page existante.
2. Demande de récupération : Au lieu de déclencher un rechargement d’une page entière, Blazor effectue un fetch demander en utilisant le navigateur Récupérer l’API.
3. Correctif DOM : Le contenu de la réponse rendue est ensuite géré par Blazor qui le corrige dans le modèle d’objet de document (DOM) du navigateur. Intérieurement blazor.web.js met en œuvre un Levenshtein distance calcul pour déterminer la méthode la plus efficace pour patcher le DOM (Conserver, mettre à jour, insérer ou supprimer). Les correctifs DOM permettent à Blazor de mettre à jour la page sans redessiner tout l’écran, minimisant ainsi le temps de rendu.

La fonction de navigation améliorée offre une expérience idéale pour la plupart des solutions. Toutefois, si la fonctionnalité n’est pas souhaitée, elle peut être désactivée.

Désactivation de la navigation améliorée

Les pages qui utilisent des bibliothèques JavaScript pour apporter des modifications au DOM peuvent interférer avec une navigation améliorée ou provoquer une instabilité. La fonctionnalité peut être contrôlée globalement, hiérarchiquement et par lien pour faire face à ces scénarios.

Pour désactiver la navigation améliorée et la gestion des formulaires, définissez disableDomPreservation à vrai pour Blazor.start.

<script src="https://www.telerik.com/blogs/{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    ssr: { disableDomPreservation: true }
  });
</script>

Dans l’exemple précédent, le {BLAZOR SCRIPT} l’espace réservé est le chemin du script Blazor et le nom du fichier. Pour connaître l’emplacement du script, consultez la structure du projet ASP.NET Core Blazor.

Les exemples suivants désactivent la navigation améliorée à l’aide de l’option data-enhance-nav attribut. Ci-dessous, data-enhance-nav="false" désactive la fonctionnalité pour une instance de lien unique.

<a href="https://www.telerik.com/blogs/redirect" data-enhance-nav="false">
    GET without enhanced navigation
</a>

L’exemple suivant montre comment l’utilisation de la hiérarchie d’éléments peut désactiver plusieurs éléments. Dans l’extrait ci-dessous, la navigation améliorée est désactivée pour tous les liens car ils sont des enfants du nav où data-enhance-nav="false" est réglé.

<ul data-enhance-nav="false">
    <li>
        <a href="https://www.telerik.com/blogs/redirect">GET without enhanced navigation</a>
    </li>
    <li>
        <a href="redirect-2">GET without enhanced navigation</a>
    </li>
</ul>

La navigation améliorée est un excellent moyen d’améliorer progressivement l’expérience utilisateur d’une application Blazor. Avec .NET 8, la fonctionnalité est activée dès le départ mais peut être configurée facilement via une syntaxe globale ou par élément. Les formulaires peuvent également être améliorés avec des fonctionnalités similaires ; cependant, la gestion améliorée des formulaires doit être activée.

Gestion améliorée des formulaires

Lorsque Blazor utilise SSR statique, les formulaires lancent une requête POST standard. Lorsque le serveur répondra, la page sera complètement remplacée pour mettre à jour et afficher les résultats. Pour éliminer l’actualisation de la page complète provoquée par les formulaires, les applications Blazor peuvent activer gestion améliorée des formulaires.

Les formulaires SSR statiques peuvent être écrits en utilisant un code presque identique à ceux utilisant l’interactivité. Les formulaires rendus statiquement seront publiés et validés comme prévu, nécessitant quelques modifications mineures. Afin de lier correctement les valeurs d’une publication de formulaire statique, les paramètres souhaités doivent utiliser le [SupplyParametersFromForm] attribut. De plus, comme les publications de formulaire sont plus complexes que la navigation, nous devons explicitement activer la fonctionnalité.

La gestion améliorée des formulaires est activée uniquement par le composant EditForm Enhance propriété ou <form> élément en utilisant l’élément data-enhance attribut. Contrairement à la navigation améliorée, la gestion améliorée des formulaires n’est pas hiérarchique et ne s’applique pas aux formulaires enfants.

Dans l’extrait ci-dessous, la gestion améliorée des formulaires est activée en définissant la propriété Enhance. La valeur par défaut est true et peut être réglé sur false ou supprimé pour désactiver la fonctionnalité.

<EditForm Enhance ...>
    ...
</EditForm>

Dans l’extrait suivant, la gestion améliorée des formulaires est activée en définissant l’option data-enhance attribut sur un élément de formulaire. La valeur par défaut est true et peut être réglé sur false ou supprimé pour désactiver la fonctionnalité.

<form ... data-enhance>
    ...
</form>

Les publications de formulaire amélioré ne fonctionnent qu’avec les points de terminaison Blazor. La publication d’un formulaire amélioré sur un point de terminaison non Blazor entraîne une erreur.

Lorsqu’un formulaire amélioré soumet une demande, Blazor interceptera la demande, exécutera l’action du formulaire et corrigera les modifications dans le DOM. La page est mise à jour sans redessiner tout l’écran, ce qui permet d’économiser du temps et de la position de défilement de l’utilisateur.

Les formulaires améliorés sont compatibles avec le rendu en continu. Le rendu en streaming permet une expérience de type SPA avec des processus de longue durée. En combinant des formulaires améliorés avec un rendu en streaming, un indicateur de progression peut être affiché en attendant la publication d’un formulaire sans avoir besoin d’interactivité.

@attribute [StreamingRendering]
<EditForm Enhance FormName="create-product" method="post" Model="@Item" OnValidSubmit="SaveProduct">
    <p>Name: <InputText @bind-Value="@Item.Name"/></p>
    <p>Price: $<InputNumber @bind-Value="@Item.Price"/></p>
    
    <button>submit</button>
    
    <DataAnnotationsValidaton/>
    <ValidationSummary />
</EditForm>

@code {
    string? message;
    
    [SupplyParameterFromForm] public Product Item { get;set; } = new();
    
    private async Task SaveProductAsync() 
    {
        message = $"Saving...";
        await DataStore.AddProductAsync(Item);
        message = $"Product added";
    }
}

Conclusion

Blazor dans .NET 8 associe les concepts HTML et HTTP traditionnels à des techniques modernes pour permettre une échelle mobile entre les pages statiques et les SPA complets. Grâce à une amélioration progressive utilisant une navigation et une gestion des formulaires améliorées, Blazor est capable de minimiser les temps de chargement des pages et d’équilibrer les performances tout en minimisant les compromis.