La nouvelle hydratation angulaire

Examinez de plus près la nouvelle hydratation dans Angular et comment vous pouvez vous débarrasser du redoutable scintillement dans vos applications SSR Angular.

Il est enfin arrivé. Le scintillement redouté dans Angular Universal a disparu !

Angular 17 est livré avec de nombreuses nouvelles fonctionnalités intéressantes, prouvant que l’équipe à l’écoute de ses utilisateurs. Avec toutes les avancées dans d’autres frameworks, il est bon de savoir que le nouveau Angular 17 a également fait des efforts en matière de rendu côté serveur (SSR).

Universel

Angular Universal a disparu, et maintenant nous avons SSR. Au lieu d’ajouter un nouveau package, l’installation angulaire par défaut propose une option pour installer @angular/ssr, qui est son remplaçant. La valeur par défaut est également maintenant composants autonomes.

Vaciller

L’un des questions les plus importantes a été le « scintillement redouté ». Cela est dû au fait que « Angular a détruit et repeint les structures DOM après le redémarrage du client ». Depuis Angular 16, l’équipe Angular a repensé l’ensemble du système d’hydratation, améliorant considérablement le processus de résolution du problème.

Hydratation non destructive

Avant que cela ne soit présent, Angular envoyait le code HTML pour que le client le charge immédiatement. Le code serait créé dynamiquement sur le serveur. Cependant, une fois les données chargées dans le DOM, elles ont été détruites. Avec la nouvelle méthode « d’hydratation non destructive », Angular peut réutiliser ces éléments DOM, au lieu de les détruire et de les recréer.

Éléments essentiels du Web

Lorsque la page se charge et se recharge, cela peut affecter le Éléments essentiels du Web les statistiques, ou la façon dont les performances de chargement de la page Web sont mesurées. Ceci est important pour les classements SEO. Cela a directement amélioré les chiffres de ces mesures :

Installation du rendu côté serveur

Lorsque vous créez pour la première fois un projet avec Angular 17 en utilisant ng new, vous aurez quelques options. Assurez-vous de sélectionner y au rendu côté serveur.

Cela ajoutera automatiquement le fournisseur d’hydratation à votre app.config.ts déposer:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration()]
};

Alternativement, vous pouvez ajouter le provideClientHydration manuellement à un projet existant ou à un module d’application :

import {provideClientHydration} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

@NgModule({
  declarations: [RootCmp],
  exports: [RootCmp],
  bootstrap: [RootCmp],
  providers: [provideClientHydration()],
})
export class AppModule {}

Mises en garde

• Le HTML rendu par le serveur doit exactement correspondre au HTML rendu par le client.
• Aucune manipulation directe du DOM avec innerHTML, outerHTMLetc. Utilisez les fonctions angulaires.
• Vous devez avoir HTML valide.
• Sans zone noop ZoneJS n’est pas supporté… pour le moment !

Essai

Vous pouvez supprimer le provideClientHydration fournisseur pour tester Angular sans lui. Vous pouvez également voir comment cela fonctionne en mode développement en affichant la console dans les outils de développement.

Angular a parcouru un LONG chemin. Angular 16 a apporté des signaux, Angular 17 a apporté plus d’améliorations de vitesse et de syntaxe, et Angular 18, espérons-le, sera par défaut NoopZone pour des applications encore plus rapides sans ZoneJS.

Angulaire est une bête.

Liens