Les avantages du rendu statique côté serveur

Découvrez comment utiliser le rendu statique côté serveur dans Blazor et comment le rendu par flux améliore l’expérience utilisateur.

Blazor est livré avec différents modes de rendu. Avec .NET 7 et versions antérieures, nous avons dû choisir entre Blazor Server et Blazor WebAssembly au niveau de l’application. À partir de .NET 8 et du modèle de projet Blazor Web App, nous disposons désormais de trois modes de rendu disponibles : rendu statique côté serveurl’interactivité de Blazor Server et l’interactivité de Blazor WebAssembly.

Dans cet article, nous explorerons le mode de rendu non interactif, désormais par défaut, le rendu statique côté serveur (static SSR).

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Introduction au rendu statique côté serveur

À partir de .NET 8 et l’introduction de rendu statique côté serveurc’est maintenant le mode de rendu par défaut pour les applications Blazor.

Cela signifie que si nous ne fournissons pas explicitement un mode de rendu au niveau de l’application (en le déclarant dans le fichier App.razor file) ou au niveau d’une page/composant (en utilisant le @rendermode directive), la page ou le composant utilise un SSR statique.

Le rendu statique côté serveur est un mode de rendu non interactif– ce qui signifie que nous ne pouvons pas exécuter de code d’interaction, tel que la gestion des clics sur des boutons, à partir du code C#.

Cependant, nous pouvons toujours utiliser C# pour initialiser le composant, charger les données de manière asynchrone à partir d’un service injecté et utiliser le modèle de composant Razor pour restituer les données de manière pratique.

Le avantages en termes de performances L’utilisation du rendu statique côté serveur provient du mode de rendu simple. Le client envoie une requête au serveur et le serveur fournit le code HTML rendu. Il s’agit du modèle requête/réponse classique utilisé depuis les débuts d’Internet.

Aucune connexion de socket Web persistante (pas de connexion SignalR) ni de code WebAssembly n’est impliqué.

La mise en cache de la réponse d’une page statique rendue côté serveur augmentera encore les performances de l’application Web.

Comment configurer l’application

Lors de la création d’une nouvelle application Web Blazor à l’aide du modèle de projet Blazor Web App par défaut (« blazor » dans la CLI .NET), nous pouvons choisir un mode de rendu interactif.

Lors de la sélection Nonenous obtenons le strict minimum d’une application Web Blazor prenant en charge uniquement le rendu statique côté serveur. Cependant, lorsque nous choisissons l’un des autres modes de rendu disponibles (Blazor Server ou Blazor WebAssembly), nous bénéficions toujours du support SSR statique.

Dans le Program.cs fichier, nous avons deux lignes qui activent la prise en charge statique SSR pour les composants Razor dans une application Web Blazor.

builder.Services.AddRazorComponents()

Tout d’abord, nous devons appeler le AddRazorComponents méthode sur le WebApplicationBuilder s’opposer à l’enregistrement des services requis.

app.MapRazorComponents<App>();

Ensuite, nous devons appeler le générique MapRazorComponentsqui ajoute un middleware au pipeline HTTP de l’application Web.

Une page statique rendue côté serveur

Implémentons un composant Razor en utilisant le rendu statique côté serveur. Nous créons une page d’équipe pour un site Web d’entreprise.

@page "/team"
@using BlazorSSR.Services
@inject IEmployeeService EmployeeService

<h1>Team</h1>

<p>Our team members make the magic happen.</p>

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
    @foreach (var member in TeamMembers)
    {
        <div style="margin-bottom: 25px;">
            <h2>@member.Name</h2>
            <div>@member.Role</div>
            <div>@member.StartingDay.ToShortDateString()</div>
        </div>
    }
</div>

@code {
    public IEnumerable<Employee> TeamMembers { get; set; } = 
        new List<Employee>();

    protected async override Task OnInitializedAsync()
    {
        TeamMembers = await EmployeeService.GetEmployees();
    }
}

Remarquez le @page directive, qui transforme ce composant en une page routable. Nous injectons également une instance du IEmployeeService en utilisant le @inject directif.

Le modèle de composant utilise un foreach boucle pour parcourir tous les éléments du TeamMembers propriété de type IEnumerable de Employee.

Dans la section code, nous utilisons l’instance injectée du IEmployeeService pour charger les données des employés à l’aide du mode asynchrone GetEmployees méthode à l’intérieur du OnInitializedAsync méthode du cycle de vie.

Le EmployeeService la classe et son IEmployeeService l’interface ressemble à ceci :

namespace BlazorSSR.Services;

public interface IEmployeeService
{
    Task<IList<Employee>> GetEmployees();
}

public record Employee(string Name, string Role, DateOnly StartingDay);

public class EmployeeService : IEmployeeService
{
    public async Task<IList<Employee>> GetEmployees()
    {
        var employees = new List<Employee>
        {
            new Employee("Norbert Hugh", "CEO", 
                new DateOnly(2022, 8, 1)),
            new Employee("Sonia Balmer", "Head of HR", 
                new DateOnly(2022, 8, 1)),
            new Employee("Peter Jackson", "HR Assistant", 
                new DateOnly(2023, 7, 16)),
            new Employee("Quincy Rover", "Head of Marketing", 
                new DateOnly(2020, 1, 1)),
            new Employee("John Doe", "Software Developer", 
                new DateOnly(2020, 2, 1)),
            new Employee("Sabrina Walsh", "Software Developer", 
                new DateOnly(2020, 1, 1))
        };

        
        await Task.Delay(2000);

        return employees;
    }
}

Nous enregistrons le service auprès du système d’injection de dépendances ASP.NET Core dans le Program.cs déposer en tant que service limité.

builder.Services.AddScoped<IEmployeeService, EmployeeService>();

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Indice: Notez le délai de deux secondes (2 000 millisecondes) dans le EmployeeService mise en œuvre. Vous apprendrez bientôt pourquoi j’ai ajouté ce délai.

J’ai également ajouté un élément de navigation au /team page à l’intérieur du NavMenu composant:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="team">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Team
    </NavLink>
</div>

Maintenant, créons et exécutons l’application.

Lorsque nous naviguons vers le /team page, nous vivons une délai d’environ deux secondes avant que la page de l’équipe n’apparaisse.

La raison en est que le navigateur demande la page mais que le serveur attend deux secondes jusqu’à ce qu’il restitue la réponse et la renvoie au client. Ce n’est qu’une fois que le client aura reçu la réponse qu’il la restituera à l’écran, permettant à l’utilisateur de voir la page rendue dans le navigateur.

Maintenant rendu du flux entre en jeu, apportant une solution à ce problème.

Rendu du flux

Avec le rendu par flux, nous pouvons diffuser la réponse du serveur vers le client.

Cela signifie que nous pouvons envoyer un réponse initiale au client dès que la demande arrive sur le serveur et plus tard mise à jour parties de la réponse avec du contenu supplémentaire.

Améliorons maintenant le composant Team et implémentons le rendu de flux.

Dans un premier temps, nous utilisons le @attribute directive et ajoutez le StreamRendering attribut au composant. Il active le rendu du flux pour cette page.

@attribute [StreamRendering]

Ensuite, nous faisons le TeamMembers propriété un type de référence nullable et initialisez-le avec null.

public IEnumerable<Employee>? TeamMembers { get; set; } = null;

Ensuite, nous utilisons un if déclaration pour vérifier si le TeamMembers la propriété est null. Si c’est nullnous rendons un espace réservéet si ce n’est pas le cas nullnous utilisons le même code que nous avons utilisé auparavant pour restituer les membres de l’équipe.

Le composant terminé ressemble maintenant à ceci :

@page "/team"
@using BlazorSSR.Services
@inject IEmployeeService EmployeeService
@attribute [StreamRendering]

<h1>Team</h1>

<p>Our team members make the magic happen.</p>

@if (TeamMembers != null)
{
    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
        @foreach (var member in TeamMembers)
        {
            <div style="margin-bottom: 25px;">
                <h2>@member.Name</h2>
                <div>@member.Role</div>
                <div>@member.StartingDay.ToShortDateString()</div>
            </div>
        }
    </div>
}
else
{
    <div>Loading...</div>
}

@code {
    public IEnumerable<Employee>? TeamMembers { get; set; } = null;

    protected async override Task OnInitializedAsync()
    {
        TeamMembers = await EmployeeService.GetEmployees();
    }
}

Maintenant, créons et exécutons à nouveau l’application.

Lorsque je navigue vers la page Équipe, je vois instantanément la page de l’équipe avec l’espace réservé.

Après deux secondes, la page mises à jouret nous voyons tous les membres de l’équipe.

L’application semble beaucoup plus performant et convivialmême s’il faut encore deux secondes au serveur pour charger les données et les renvoyer au client, grâce au délai artificiel de deux secondes dans la mise en œuvre du service.

Comment fonctionne le rendu de flux ?

Le rendu du flux fonctionne complètement sans établir de connexion persistante avec une socket Web SignalR ou télécharger un bundle WebAssembly au client.

Mais comment ça marche ?

Le rendu de flux dans le rendu statique côté serveur Blazor utilise le codage de transfert fragmenté fonctionnalité du protocole HTTP. Il s’agit d’une fonctionnalité native de HTTP 1.1 et implémentée dans tous les navigateurs Web modernes.

Cas d’utilisation du rendu statique côté serveur

Les cas d’utilisation les plus courants du SSR statique sont les pages qui le font ne nécessite pas d’interactivité. De bons exemples sont l’histoire de l’entreprise, les pages ou la page d’accueil du site Web. Ou un site de membre d’équipe avec du texte et des images statiques, comme indiqué dans cet article.

Utiliser le SSR statique pour un formulaire de contact ou une page de connexion ne fonctionne pas puisque nous ne peut pas gérer les clics sur les boutons ou liez-vous aux champs de saisie d’une page ou d’un composant non interactif.

C’est parfaitement bien d’être sélectif et mélanger et assortir modes de rendu au sein de la même application. L’utilisation du rendu statique côté serveur offrira d’excellentes performances et une excellente expérience utilisateur pour vos composants.

Conclusion

Le rendu statique côté serveur est un mode de rendu puissant pour les applications Web Blazor introduites avec .NET 8. C’est le rendu par défaut mode pour tous les composants qui n’utilisent pas explicitement ou implicitement l’interactivité de Blazor Server ou de Blazor WebAssembly.

Nous pouvons implémenter des sites Web ou des applications entiers avec uniquement un rendu statique côté serveur et des pages spécifiques en utilisant SSR statique tout en utilisant l’interactivité Blazor Server ou Blazor WebAssembly sur d’autres pages.

Nous avons appris quels cas d’utilisation sont d’excellents candidats pour l’utilisation du SSR statique dans Blazor, principalement pages avec du contenu statique. Nous avons également appris que nous ne peut pas avoir d’interactivité d’exécution sur ces pages.

Avec le rendu par flux, nous disposons d’un mécanisme qui nous permet de restituer un espace réservéoffrant d’excellentes performances et une expérience utilisateur avant que l’intégralité des données ne soit renvoyée du serveur et restituée au client.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.