L’hydratation, pour simplifier, est le processus qui permet de restaurer une application du côté de l’utilisateur en utilisant une technique appelée SSR (rendu côté serveur). Cela implique des fonctionnalités telles que la réutilisation des structures de la page web générées par le serveur, la préservation de l’état de l’application, et le transfert de données déjà récupérées par le serveur, entre autres.
En résumé, lorsque vous lancez une application dans votre navigateur, Angular réutilise les informations présentes dans le code HTML généré par le serveur.
Chaque fois qu’il y a un changement, le serveur enregistre une copie de cette version pour accélérer le lancement de l’application en réduisant le temps de chargement. Cette technologie, fournie par Angular Universal, permet de rendre une application sur le serveur en créant du contenu HTML statique. Avec les versions antérieures d’Angular, le rendu de tous les éléments de la page se faisait à partir de zéro à chaque changement.
La nouvelle méthode d’hydratation de la version 16 d’Angular recherche les éléments de la page existants tout en créant des structures de données internes et en attachant des écouteurs d’événements à ces éléments. Cette approche permet de ne modifier que les éléments spécifiques, ce qui réduit considérablement le temps de chargement de l’application.
Pour activer cette fonctionnalité d’hydratation avec NgModules, il suffit d’ajouter « provideClientHydration » à la liste des fournisseurs (providers) dans le module principal de l’application, généralement nommé « app.module.ts ».
import {provideClientHydration} from ‘@angular/platform-browser’;
import {NgModule} from ‘@angular/core’;
@NgModule({
declarations: [RootCmp],
exports: [RootCmp],
bootstrap: [RootCmp],
providers: [provideClientHydration()],
})
export class AppModule {}
SYsteme de build revisité
Cette nouvelle version d’Angular introduit un nouveau système de build pour les développeurs basé sur EsBuild.
EsBuild améliore sensiblement le temps de création de l’application. C’est encore une fonctionnalité expérimentale, mais elle semble très prometteuse. Pour l’activer, il suffit de changer la propriété builderdans angular.json:
ES build
ESBuild est un outil qui aide les développeurs à rendre leurs projets JavaScript et TypeScript plus performants lors de la phase de construction. Sa particularité réside dans sa rapidité exceptionnelle, ce qui signifie qu’il peut traiter rapidement de grands projets. De plus, ESBuild prend en charge différents langages, tels que JavaScript moderne, TypeScript, JSX, et offre des fonctionnalités avancées telles que la concaténation de fichiers et la minification du code. Il se distingue également par sa légèreté, ne nécessitant que peu de dépendances externes, et peut être utilisé en ligne de commande ou intégré dans des tâches de construction, facilitant ainsi son intégration dans divers projets de développement.