Fermer

janvier 27, 2025

Hydratation et hydratation incrémentielle en angulaire

Hydratation et hydratation incrémentielle en angulaire


L’hydratation peut être considérée comme « l’activation » d’une page HTML rendue côté serveur sur le client. Une hydratation progressive permet cela par étapes, à la demande.

L’hydratation est un concept important dans le développement Web moderne, en particulier dans le contexte des applications de rendu côté serveur (SSR) et de l’amélioration des performances. Avec Angular 19, le framework a introduit l’hydratation incrémentielle, une approche plus avancée de l’hydratation qui permet un contrôle plus précis sur le moment et la manière dont les parties d’une application deviennent interactives.

Dans cet article, nous explorerons les fondements de l’hydratation et nous plongerons dans les dernières innovations d’Angular, en particulier l’hydratation progressive.

Hydratation

Dans les applications de rendu côté serveur (SSR), hydratation peut être considéré comme le processus « d’activation » d’une page HTML rendue côté serveur sur le client. Cela signifie attacher des écouteurs d’événements, restaurer l’état de l’application et réutiliser les nœuds DOM rendus par le serveur plutôt que de les recréer. Ce faisant, l’hydratation évite le rendu redondant, améliorant ainsi les mesures de performances telles que Délai de première entrée (FID), La plus grande peinture de contenu (LCP) et Changement de mise en page cumulatif (CLS).

Pensez-y comme si vous receviez un meuble entièrement assemblé. Le rendu côté serveur livre le produit assemblé, et l’hydratation consiste à déballer et à serrer quelques boulons pour le rendre prêt à l’emploi. Sans hydratation, c’est comme jeter les meubles pré-assemblés et les reconstruire à partir de zéro : gaspillage et inefficacité.

Bien que l’hydratation améliore les performances, les approches traditionnelles présentent certaines limites, comme les suivantes :

  • Activation globale : L’hydratation complète de l’application nécessite de télécharger simultanément tout le JavaScript associé à la page, ce qui peut entraîner des temps de chargement initiaux plus lents pour les applications volumineuses.
  • Le phénomène de la « vallée étrange » : Avant que l’hydratation ne soit terminée, les éléments rendus par le serveur peuvent apparaître interactifs mais ne disposent pas des fonctionnalités attendues par les utilisateurs. Par exemple, cliquer sur un bouton avant que son code JavaScript ne soit chargé n’entraîne aucune réponse, créant une expérience utilisateur frustrante. Voir une excellente explication à ce sujet dans Post récent d’Alyssa sur Angular 19.
  • Changements de disposition : Le contenu d’espace réservé utilisé pour différer le chargement peut entraîner une instabilité visuelle lorsque le contenu réel le remplace.

Angular a résolu ces problèmes de manière itérative, en commençant par l’hydratation complète dans Angular 16, vues reportables en angulaire 17 et ÉvénementReplay dans Angular 18. Chacune de ces fonctionnalités a jeté les bases du développement d’Angular 19. hydratation progressive.

Hydratation progressive

Hydratation progressive s’appuie sur l’hydratation complète de l’application en permettant aux développeurs d’hydrater des parties d’une application à la demande plutôt que de les hydrater toutes en même temps. Ceci est réalisé grâce au familier @defer syntaxe, où l’hydratation n’est déclenchée que lorsque cela est nécessaire. Par exemple, un composant peut hydrater :

Pour activer l’hydratation incrémentielle, nous devons vérifier que notre application utilise déjà le SSR et l’hydratation. Ensuite, nous pouvons mettre à jour notre configuration de bootstrap avec le avecIncrementalHydration() fonction:

import {
  bootstrapApplication,
  provideClientHydration,
  withIncrementalHydration,
} from "@angular/platform-browser";

bootstrapApplication(AppComponent, {
  providers: [provideClientHydration(withIncrementalHydration())],
});

Après avoir activé, nous pouvons utiliser le @reporter directive avec des déclencheurs d’hydratation dans nos modèles :

@defer (hydrate on viewport) {
  <shopping-cart/>
}

Ce qui précède est un exemple d’hydratation d’un composant lorsqu’il entre dans la fenêtre. Cela signifie que <shopping-cart> Le composant ne deviendra interactif que lorsqu’il défilera, économisant ainsi les ressources jusqu’à ce qu’elles soient nécessaires.

De même, nous pouvons hydrater un composant lors de l’interaction de l’utilisateur, en fournissant un espace réservé jusqu’à ce que le composant soit prêt :

@defer (hydrate on interaction) {
  <product-details />
} @placeholder {
  <div>Loading...</div>
}

Pour les cas où certains composants ou sections de la page ne nécessitent pas d’interactivité, Angular offre la possibilité d’ignorer complètement l’hydratation lors du rendu initial. Ceci est particulièrement utile pour le contenu statique, comme les pieds de page ou les éléments purement décoratifs, qui ne bénéficient pas de l’activation JavaScript. Nous pouvons y parvenir avec le ne jamais s’hydrater directif:

@defer (hydrate never) {
  <static-footer />
}

L’exemple ci-dessus conserve le <static-footer> composant de toujours s’hydrater, en conservant son contenu statique et en évitant une surcharge JavaScript inutile. Vous pouvez explorer plus d’exemples des différents déclencheurs d’hydratation dans la documentation officielle d’Angular.

Dans Angular 19, l’hydratation incrémentielle combine plusieurs fonctionnalités clés :

  • Rendu serveur avec contenu déshydraté : Le serveur affiche le modèle principal pour les blocs différés, mais le client ignore le téléchargement de JavaScript jusqu’à ce qu’un déclencheur d’hydratation soit déclenché. De cette façon, aucun espace réservé n’est requis, ce qui réduit les changements de mise en page.
  • Rediffusion de l’événement : Introduite dans Angular 18, cette fonctionnalité capture les interactions des utilisateurs pendant la période « uncanny Valley » et les rejoue une fois le composant hydraté.
  • Activation sélective : Les développeurs peuvent contrôler quelles parties de la page deviennent interactives et à quel moment, réduisant ainsi les téléchargements JavaScript inutiles et améliorant les performances.

En combinant ces fonctionnalités, Angular 19 fournit une solution robuste pour optimiser les performances et l’expérience utilisateur dans les applications SSR.

Conclure

Dans l’ensemble, l’hydratation incrémentielle dans Angular 19 représente une grande avancée dans l’optimisation des performances des applications Web. En différant le JavaScript non critique et en hydratant les composants uniquement lorsque cela est nécessaire, les développeurs peuvent réduire la taille des bundles et améliorer les temps de chargement. Cette approche améliore l’expérience utilisateur en empêchant les changements de disposition afin que les composants se comportent de manière prévisible. Avec la flexibilité supplémentaire de déclencheurs d’hydratation affinés et la possibilité d’exclure le contenu statique de l’hydratation avec hydrate neverLes développeurs angulaires disposent désormais de plus d’outils pour créer des applications efficaces et réactives.

Pour plus de détails, assurez-vous de consulter les ressources suivantes ci-dessous :




Source link