Angular Amélioration des performances des applications avec hydratation partielle et SSR

Angular 18 introduit l'hydratation partielle, une technique puissante qui améliore considérablement les performances des applications en conjonction avec le rendu côté serveur (SSR). Cet article plonge dans le concept d'hydratation partielle, ses avantages et comment elle exploite les vues différées introduites dans Angular 17.

Pourquoi l'hydratation partielle et la SSR sont importantes

Les applications Angular traditionnelles souffrent souvent d'un goulot d'étranglement en termes de performances lors du chargement initial de tout JavaScript. Cela peut avoir un impact significatif sur le temps de chargement initial, en particulier pour les applications volumineuses et critiques en termes de performances. En réduisant stratégiquement la quantité de JavaScript chargée au départ, nous pouvons considérablement améliorer l'expérience utilisateur.

Hydratation partielle : une approche plus intelligente de la RSS

L'hydratation partielle s'appuie sur la base des vues différées, introduites dans Angular 17. Au lieu de restituer un simple espace réservé sur le serveur, Angular peut désormais restituer le contenu principal d'un bloc désigné marqué de @defer. Voici comment cela fonctionne :

1. Rendu côté serveur : Le serveur restitue le contenu essentiel de l'application ainsi que le bloc @defer contenant le composant.
2. Hydratation côté client : Lorsque l'application s'exécute sur le client, Angular télécharge le JavaScript nécessaire pour le composant différé.
3. Activation sélective : Le composant différé ne devient interactif que lorsqu'il remplit des conditions spécifiques, comme entrer dans la fenêtre d'affichage de l'utilisateur.

Cette approche offre plusieurs avantages :

• Temps de chargement initial plus rapides : en différant le JavaScript inutile, les utilisateurs bénéficient d'un chargement initial de la page plus rapide.
• Perception améliorée : L'application semble plus réactive car les fonctionnalités de base sont disponibles instantanément.
• Consommation de données réduite : Des charges utiles JavaScript initiales plus petites se traduisent par une utilisation moindre des données.

Activer l'hydratation partielle

Utiliser une hydratation partielle est simple. Voici un exemple :

{
  @defer (render on server; on viewport) {
    <my-deferrable-component></my-deferrable-component>
  }
}

Dans cet exemple :

• my-deferrable-component est rendu sur le serveur.
• Côté client, Angular télécharge le JavaScript requis pour le composant.
• L'interaction avec my-deferrable-component ne se produit que lorsqu'il entre dans la fenêtre d'affichage, optimisant ainsi le rendu et les performances.

Conclusion

L'hydratation partielle permet aux développeurs Angular de créer des applications performantes et conviviales. En différant stratégiquement l'hydratation des composants en fonction de l'interaction ou de la visibilité de l'utilisateur, Angular 18 garantit une expérience utilisateur fluide et réactive, en particulier pour les applications complexes et gourmandes en données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!