SSR, SSG et hydratation partielle dans Angular 18

Découvrez comment le rendu côté serveur, la génération de sites statiques et l’hydratation partielle dans Angular 18 permettent aux développeurs d’optimiser mieux que jamais.

Angulaire est un framework JavaScript largement utilisé, connu pour sa capacité à créer des applications Web dynamiques et interactives. L’une des avancées les plus significatives des versions récentes d’Angular est le développement des capacités de rendu côté serveur (SSR) et de génération de site statique (SSG). Dans cet article, nous examinerons en profondeur SSR et SSG dans Angular et comment ils sont configurés, ainsi que les nouvelles capacités d’hydratation introduites dans Angular 18.

Avant d’approfondir, récapitulons d’abord quelques concepts clés qui nous aideront à guider notre compréhension des dernières fonctionnalités de SSR, SSG et Angular.

SSR (rendu côté serveur)

Le rendu côté serveur (SSR) est une technique dans laquelle Angular restitue la page Web sur le serveur au lieu du client, permettant au navigateur d’afficher le code HTML entièrement rendu dès le chargement de la page. Cette approche peut améliorer considérablement les performances, en particulier pour les utilisateurs utilisant des connexions plus lentes ou des appareils mobiles, et est essentielle pour le référencement, car les moteurs de recherche peuvent explorer plus facilement les pages rendues par le serveur.

SSR fonctionne en envoyant une page HTML entièrement rendue au client, réduisant ainsi le temps d’attente des utilisateurs avant de voir le contenu. Une fois que le HTML atteint le navigateur, Angular initialise l’application, donnant vie à la page avec une interactivité côté client.

Avantages du SSR dans Angular :

• Des performances plus rapides: Lorsqu’une vue statique rendue par le serveur est affichée aux nouveaux visiteurs d’un site Web, l’expérience utilisateur s’améliore considérablement.
• SEO amélioré: Alors que certains moteurs de recherche explorent et indexent des données dynamiques, beaucoup d’entre eux attendent encore du HTML brut. En fournissant du contenu statique rendu par le serveur, nous permettons à tous les moteurs de recherche d’accéder à notre site Web.

Activation du SSR dans Angular est simple : on peut soit le mettre en place dans un nouveau projet avec :

ng new --ssr

Ou ajoutez-le à un projet existant en utilisant :

ng add @angular/ssr

Les commandes ci-dessus configurent notre projet pour SSR en générant les fichiers nécessaires tels que main.server.ts: le principal point d’entrée du serveur responsable du démarrage du processus de rendu côté serveur dans les applications angulaires.

SSG (génération de sites statiques)

La génération de sites statiques (SSG) est une autre stratégie d’optimisation dans Angular qui génère des fichiers HTML statiques pendant le processus de construction. Cela permet aux pages Web d’être servies directement en tant que contenu statique, réduisant ainsi le Temps jusqu’au premier octet (TTFB) et améliorer la vitesse de chargement globale pour les utilisateurs finaux.

Bien que similaire à SSR en termes d’amélioration des performances, la principale différence est que SSG restitue le contenu à temps de construction plutôt qu’à heure de la demande. Ceci est particulièrement utile lorsque le contenu d’une application ne change pas fréquemment d’un utilisateur à l’autre, comme dans les blogs ou les pages de produits de commerce électronique.

Angular facilite l’activation de SSG en ajoutant d’abord des capacités SSR. Nous pouvons ensuite générer des fichiers HTML statiques à l’aide de la commande ng build, permettant à notre application de bénéficier de temps de chargement plus rapides et d’une charge de serveur réduite. Angular fournit également des options pour pré-rendu des itinéraires paramétrésdonnant aux développeurs la flexibilité de choisir les itinéraires à restituer au moment de la construction.

Améliorations du SSR dans Angular 18

Angular 18 introduit plusieurs améliorations clés à SSR, élargissant notamment ses capacités d’hydratation. L’hydratation est la façon dont Angular rend le HTML statique rendu par le serveur interactif côté client.

L’un des ajouts les plus importants dans Angular 18 est l’inclusion de support i18n pour l’hydratationune fonctionnalité auparavant indisponible. Cela permet d’utiliser l’hydratation dans des applications qui nécessitent une internationalisation, élargissant ainsi son applicabilité à davantage de projets.

Hydratation partielle

Une fonctionnalité remarquable introduite dans Angular 18 est hydratation partiellequi va encore plus loin avec le SSR en hydratant progressivement des parties d’application spécifiques uniquement lorsque cela est nécessaire. Cette technique permet à Angular de différer le chargement du JavaScript de certains composants, réduisant ainsi la quantité globale de code qui doit être traitée au préalable.

Avec l’hydratation partielle, nous pouvons configurer Angular pour hydrater des blocs de contenu spécifiques en fonction des actions de l’utilisateur, par exemple lorsqu’un composant entre dans la fenêtre d’affichage. Cela améliore encore plus les performances, car l’application télécharge et active JavaScript pour les composants uniquement lorsque cela est nécessaire, réduisant ainsi considérablement la taille de chargement initial de la page.

Par exemple, en utilisant le @reporter directive, nous pouvons spécifier les conditions dans lesquelles Angular hydrate un composant :

@defer (render on server; on viewport) {
    <app-calendar/>
}

Dans le scénario ci-dessus, le app-calendar Le composant est rendu sur le serveur, mais il ne sera interactif que lorsque l’utilisateur le fera défiler, optimisant à la fois la charge du serveur et du client !

L’hydratation partielle est encore en accès anticipé au moment d’écrire ces lignes, mais elle s’avère très prometteuse pour une optimisation ultérieure des applications angulaires.

Conclure

Les améliorations apportées par Angular 18 à SSR et SSG fournissent aux développeurs des outils puissants pour améliorer les performances, le référencement et l’expérience utilisateur. Avec des avancées telles que la prise en charge i18n de l’hydratation et l’introduction de l’hydratation partielle, Angular continue d’évoluer vers un cadre conçu pour la vitesse, l’évolutivité et la flexibilité.

Pour une lecture plus approfondie de toutes les principales mises à jour apportées par Angular 18, consultez l’article précédemment écrit :Tout ce qui vous manque dans Angular v18.

Qu’il s’agisse de créer des applications hautement dynamiques ou des sites avec du contenu statique, les capacités SSR et SSG d’Angular aident les développeurs à optimiser leurs applications Web pour le Web moderne.