L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Ajoutez une page marketing statique à votre application Blazor dans .NET 9
Dans .NET 9, vous pouvez utiliser les modes de rendu interactifs de Blazor pour la plupart de votre application, puis passer au rendu statique côté serveur pour des pages spécifiques.
Vous avez donc créé votre nouvelle application brillante en utilisant Blazor. Tout fonctionne comme vous l’espériez et vous êtes satisfait de la façon dont Blazor a travaillé pour ce projet.
Mais maintenant, vous devez commercialiser votre application !
Ce qui soulève la question : quel cadre/approche devriez-vous utiliser pour vos pages de destination ?
Les pages de destination ont généralement des exigences différentes de celles du reste de votre application. Là où votre application doit répondre aux interactions des utilisateurs telles que les clics sur des boutons et le contenu dynamique, les pages de destination sont beaucoup plus susceptibles d’être de nature statique. Du texte, quelques images, peut-être un formulaire ou deux.
Vous pourriez être tenté d’opter pour un framework différent pour ces pages, peut-être des pages Razor ou MVC.
Mais avec .NET 8, et maintenant .NET 9, votre application Web Blazor dispose déjà de tout ce dont vous avez besoin pour ajouter des pages de destination rapides, réactives et optimisées pour le référencement à votre application.
Rendu côté serveur statique
Depuis .NET 8, vous pouvez choisir de restituer vos composants à l’aide du rendu statique côté serveur. Avec cela, vos composants sont rendus sur le serveur et le HTML est renvoyé au navigateur.
Cela fonctionne bien pour les pages de destination, car ces pages se chargent rapidement et fonctionnent bien avec les robots des moteurs de recherche, car le contenu est disponible immédiatement (pas d’attente pour l’intervention de WASM ou JavaScript).
Mais que se passe-t-il si vous avez configuré votre application pour utiliser l’un des modes interactifs de Blazor ?
<!DOCTYPE html>
<html>
<head>
...
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
<Routes @rendermode="InteractiveServer" />
...
</body>
</html>
Avec cette configuration, votre application restituera tous vos composants à l’aide du rendu sur serveur interactif. Ceci est idéal lorsque vous souhaitez que les utilisateurs puissent cliquer sur des boutons, récupérer et mettre à jour dynamiquement des données, afficher des graphiques, etc.
Mais qu’en est-il de ces pages de destination ?
Dans .NET 8, la configuration ci-dessus verrouille efficacement l’intégralité de votre application pour qu’elle s’exécute de manière interactive. Si vous souhaitez mélanger et faire correspondre les modes de rendu statiques et interactifs, vous devrez supprimer cette configuration et définir les modes de rendu directement au niveau du composant.
@page "/Contact"
@rendermode InteractiveServer
<EditForm ...>
</EditForm>
Mais vous êtes alors obligé de décorer chaque composant avec un mode de rendu, même si vous utilisez le même mode pour la plupart de votre application.
Exclure des composants du rendu interactif
Une nouvelle option dans .NET 9 consiste à utiliser le ExcludeFromInteractiveRouting attribut. Avec cela, vous pouvez signaler qu’un composant spécifique doit être exclu du routage interactif.
Mais qu’est-ce que cela signifie ?
Depuis .NET 8, vos composants peuvent s’exécuter de manière interactive ou en utilisant un routage statique côté serveur.
Si vous choisissez d’exécuter les composants de manière interactive, les navigations dans les pages seront gérées via le routeur interactif de Blazor.
Ce routeur se déclenche lorsqu’un utilisateur tente de naviguer vers une autre partie de votre application ; il examine l’URL demandée, identifie le composant pertinent et restitue ce composant de manière interactive.
Désormais, dans .NET 9, vous pouvez demander à Blazor de retirer un composant spécifique de ce routage interactif, forçant ainsi toutes les demandes concernant ce composant à être dirigées vers le serveur (où un rechargement complet de la page aura lieu).
L’exemple ci-dessus montre comment Blazor dans .NET 9 gère les requêtes dans une application configurée pour utiliser InteractiveServer mode de rendu.
Lorsqu’un utilisateur demande une page qui a été « désactivée » du routage interactif, Blazor dirigera cette demande vers le serveur, qui restituera le composant concerné et renverra le code HTML résultant.
Si, en revanche, l’utilisateur demande un autre composant (non désactivé du rendu interactif), Blazor dirigera cette demande vers le routeur interactif.
Ce routeur interactif fonctionnera sur le serveur si vous utilisez InteractiveServer ou dans le navigateur que vous utilisez InteractiveWebAssembly mode de rendu.
En pratique, cela signifie que nous pouvons baliser nos pages de destination pour qu’elles s’affichent de manière statique, sur le serveur.
Voici un exemple concret.
Caractéristiques.razor
@page "/features"
@attribute [ExcludeFromInteractiveRouting]
<h1>
All about our amazing new application!
</h1>
En soi, le ExcludeFromInteractiveRouting l’attribut ne fait pas grand chose.
Cela signale que les requêtes pour cette page doivent contourner le routeur interactif, mais nous avons encore besoin d’un peu plus de code pour que la page se charge de manière statique.
App.razor
<!DOCTYPE html>
<html>
<head>
...
<HeadOutlet @rendermode="@PageRenderMode" />
</head>
<body>
<Routes @rendermode="@PageRenderMode" />
...
</body>
</html>
@code {
[CascadingParameter]
private HttpContext HttpContext { get; set; } = default!;
private IComponentRenderMode? PageRenderMode
=> HttpContext.AcceptsInteractiveRouting() ? InteractiveServer : null;
}
Dans App.razor nous sommes maintenant en mesure de définir le mode de rendu de manière conditionnelle.
Nous pouvons utiliser le nouveau HttpContext.AcceptsInteractiveRouting() méthode d’extension pour vérifier si le composant cible a été désactivé du rendu interactif.
Si le composant accepte le routage interactif, nous le rendrons en utilisant InteractiveServer comme mode de rendu.
Si nous avons décoré le composant cible avec le ExcludeFromInteractiveRouting attribut, puis nous définissons le mode de rendu sur nullincitant ainsi Blazor à contourner le routeur interactif et à le restituer de manière statique sur le serveur.
Avec ces changements en place, toute demande de /features la page sera acheminée vers le serveur, où elle restituera le Caractéristiques composant et renvoie le code HTML résultant.
À partir de là, nous pourrions utiliser des formulaires pour capturer les entrées de l’utilisateur, mais nous ne pouvons pas utiliser de gestionnaires d’événements pour gérer les événements (tels que les clics sur des boutons).
Le reste de l’application continuera à s’exécuter de manière interactive, comme auparavant, en utilisant l’un des modes de rendu interactifs de .NET.
Organiser vos composants statiques et interactifs
Un dernier conseil. Si vous ajoutez une ou plusieurs pages marketing « statiques » à votre application, il peut être utile de les conserver séparées dans la structure des dossiers de votre projet.
Voici un exemple, où nous avons une page marketing dans un Commercialisation dossier.
Notez que ce dossier possède également son propre dossier Mise en page et MarketingLayout composant.
Dans les pages marketing, nous pouvons explicitement choisir d’utiliser cette mise en page Marketing.
@page "https://www.telerik.com/"
@attribute [ExcludeFromInteractiveRouting]
@layout Layout.MarketingLayout
Avec cela, nous disposons d’une mise en page dédiée pour les pages marketing, et nous pouvons voir en un coup d’œil quels composants sont destinés aux pages marketing et lesquels sont destinés à l’application.
Si nous sommes sûrs de vouloir que tous les composants de ce dossier Marketing soient rendus de manière statique, nous pouvons utiliser un fichier _Imports.
Marketing/_Imports.razor
@attribute [ExcludeFromInteractiveRouting]
En déclarant notre attribut ici, tous les composants de ce dossier seront exclus de l’utilisation du routeur interactif.
En résumé
Dans .NET 8, lorsque vous avez configuré votre application pour qu’elle s’exécute à l’aide de l’un des modes de rendu interactif globalement (au niveau de l’application), vous étiez bloqué avec un rendu interactif pour l’ensemble de votre application.
Désormais, avec .NET 9, vous pouvez supprimer des composants spécifiques de cette boucle de rendu interactif et demander à Blazor de restituer ces composants spécifiques de manière statique sur le serveur.
Idéal pour les pages de destination et les exigences similaires où vous n’avez pas besoin d’interactivité client/serveur et que vous souhaitez des pages à chargement rapide qui fonctionnent bien avec le référencement.
Vous pouvez trouver un exemple de dépôt démontrant cette approche ici.
Source link