Le guide complet pour mettre en place l’ISR sur Angular

Avant de se lancer

Si vous souhaitez en apprendre davantage sur cette technologie, nos formations Angular vous apprendront tout ce qu’il y a à savoir afin que vous puissiez développer une nouvelle application, utiliser les composants principaux tels que les tests unitaires et fonctionnels au développement Vous pourrez également monter en compétences grâce à la formation avancée du framework.

L’équipe Ambient IT

L’hydratation et la résilience sont indéniablement des atouts pour améliorer les performances de nos applications. Cependant, elles ne suffisent pas. Devoir effectuer un rendu côté serveur de l’application à chaque demande de l’utilisateur n’est ni efficace ni rentable pour les applications volumineuses avec de nombreux utilisateurs.

Des solutions comme la génération de sites statiques (SSG) permettent de générer le site Web au moment de la construction et de mettre en cache les fichiers pour chaque itinéraire de l’application. Toutefois, SSG a ses propres problèmes. Par exemple, si une page est mise à jour, l’ensemble du site doit être reconstruit, ce qui peut prendre beaucoup de temps pour les sites volumineux (si la mise en cache de la construction n’est pas appliquée).

C’est pourquoi nous avons besoin d’une solution qui combine le meilleur des deux mondes : effectuer le rendu côté serveur de l’application pour chaque demande de l’utilisateur et mettre en cache les pages tout en les mettant à jour au besoin, sans avoir à reconstruire l’ensemble du site.

C’est là qu’intervient l’Incremental Static Regeneration (ISR). L’ISR est une technique qui permet de mettre à jour les pages statiques d’un site sans avoir à reconstruire l’ensemble du site.

Comment ça marche

L’idée derrière l’ISR est de réaliser un rendu côté serveur des pages de notre site au moment de l’exécution, puis de les mettre en cache pour les futures demandes. Au lieu de mettre en cache les pages indéfiniment, nous pouvons définir une limite de temps pour chaque page ou itinéraire. Lorsque la limite de temps expire, nous envoyons le contenu périmé à l’utilisateur et déclenchons une régénération en coulisses qui va rerendre la page et la mettre à nouveau en cache. Nous pouvons ainsi mettre à jour les pages de notre site sans avoir à reconstruire l’ensemble du site.

L’ISR peut mettre à jour les pages d’un site lorsque les données changent. Prenons l’exemple d’un blog. Lorsqu’un article est mis à jour, nous pouvons rerendre la page représentant l’article et la mettre en cache à nouveau. Cela est également utile pour les sites de commerce électronique. Les pages de produits individuelles peuvent être mises à jour en cas de modifications de prix ou de rupture de stock. On appelle cela également la régénération à la demande, car les pages ne sont régénérées que lorsqu’elles ont changé.

Prérequis

Avant de pouvoir activer l’ISR dans votre application, vous devez effectuer les étapes suivantes :

• Activer le rendu côté serveur dans votre application.
• [Facultatif] Inclure un gestionnaire de cache personnalisé (système de fichiers, Firebase Firestore, Redis, Cloudflare Workers KV, etc.).

Comment ajouter l’ISR dans Angular

Pour ajouter l’ISR à Angular, nous utiliserons la bibliothèque @rx-angular/isr (entretenue par Push-based.io, qui propose également d’autres services et outils pour améliorer les performances et l’évolutivité Web). Cette bibliothèque fournit une API qui vous permet d’ajouter l’ISR en seulement quelques lignes de code.

Tout d’abord, installez la bibliothèque :

npm install @rx-angular/isr

Ensuite, ajoutez les fournisseurs ISR.

Dans une application autonome, vous devez ajouter les fournisseurs dans le fichier app.config.server.ts :

import { provideISR } from '@rx-angular/isr/server';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    provideISR() // Enregistrez les fournisseurs ISR
  ],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

Dans une application basée sur NgModule, vous devez ajouter les fournisseurs dans le AppServerModule :

import { provideISR } from '@rx-angular/isr/server';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  
  providers: [ 
    provideISR() // Enregistrez les fournisseurs ISR
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Ces fournisseurs vous permettront de modifier le HTML rendu avant qu’il ne soit envoyé à l’utilisateur, ainsi que d’enregistrer les itinéraires que vous souhaitez mettre en cache et de définir la limite de temps pour chaque itinéraire.

Mettre en place la gestion des demandes

Modifiez le fichier server.ts pour intercepter les demandes et envoyer les pages mises en cache si elles existent.

import { ISRHandler } from '@rx-angular/isr/server';

export function app(): express.Express {
    // Autres paramètres de configuration d'Angular Universal (omis pour des raisons de concision)...

    const isr = new ISRHandler({
        indexHtml, // Le fichier index.html
        invalidateSecretToken: process.env['INVALIDATE_TOKEN'] || 'TOKEN', // Le jeton secret utilisé pour invalider le cache
        enableLogging: !environment.production, // Activer les journaux en mode développement
    });

    server.get('*',
        async (req, res, next) => await isr.serveFromCache(req, res, next),
        async (req, res, next) => await isr.render(req, res, next)
    );

    // Supprimez le gestionnaire de rendu Angular, car nous utiliserons celui d'ISR
    (req, res) => {
        res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
    }

    return server;
}

Vous avez maintenant ajouté l’ISR à votre application Angular.

Utiliser l’ISR

Pour utiliser l’ISR, vous devez ajouter la propriété « revalidate » aux itinéraires que vous souhaitez mettre en cache. Cette propriété accepte un nombre qui représente la limite de temps pour chaque itinéraire en secondes. Par exemple, si vous souhaitez mettre en cache la page d’accueil pendant 10 secondes, vous pouvez le faire de cette manière :

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    data: { revalidate: 10 }
  }
];

Et voilà ! Tous les éléments sont en place, et vous pouvez maintenant utiliser l’ISR dans votre application Angular.

REMARQUE : Par défaut, la bibliothèque utilisera le gestionnaire de cache en mémoire.

En plus des fonctionnalités que nous venons d’explorer, la bibliothèque ISR offre également :

• Régénération à la demande (régénérer les pages lorsque les données changent, par exemple, lorsqu’un article de blog est mis à jour).
• Gestionnaires de cache intégrés (cache en mémoire et système de fichiers).
• Gestionnaire de cache basé sur des plugins (créez votre propre gestionnaire de cache, par exemple, Redis, Cloudflare Workers KV, Firebase Firestore, etc.).
• Gestion des erreurs (si la page ne peut pas être rendue, nous pouvons envoyer le contenu périmé à l’utilisateur jusqu’à ce que la page soit régénérée avec succès).
• Journalisation (nous pouvons activer la journalisation en mode développement pour voir ce qui se passe sous le capot).
• Crochets de stockage/récupération du cache (mettez à jour le cache avant que la page ne soit stockée dans le cache, ou avant que la page ne soit récupérée du cache pour être envoyée à l’utilisateur).
• Combinaison du cache système de fichiers avec la pré-génération (nous pouvons utiliser ISR avec la pré-génération pour pré-générer les pages de notre site, puis les mettre en cache pour les demandes futures).

Points à prendre en compte

Lorsque vous utilisez cette bibliothèque, il y a quelques considérations à prendre en compte. Les pages qui dépendent de données spécifiques à l’utilisateur peuvent être délicates à mettre en cache et à réutiliser pour l’ensemble des utilisateurs. En pratique, il peut être préférable de ne pas mettre en cache ces pages.

Utilisez l’ISR pour améliorer l’expérience de votre application.

L’ISR améliore non seulement les performances de votre application, mais aussi l’expérience de vos utilisateurs. Commencez dès aujourd’hui à utiliser l’ISR en consultant la documentation.