À l'approche du Web 4.0, s'il n'existe pas déjà, on recherche toujours plus de vitesse et d'efficacité, notamment en ce qui concerne le rendu et l'ergonomie d'un site. L'une des avancées les plus significatives dans ce domaine est l'Incremental Static Regeneration (ISR), une technique qui a encore transformé la manière dont les sites web sont générés et servis aux utilisateurs.

L'Incremental Static Regeneration = Static Site Generation ++

L'Incremental Static Regeneration (ISR) a fait son apparition dans le paysage du développement web avec la montée en puissance des sites et applications générés statiquement (voir notre précédent article : Static Site Generation (SSG) dont il est une évolution). L'Incremental Static Regeneration (ISR) offre un compromis élégant entre la performance obtenue avec un rendu statique et la mise à jour dynamique des données.

Plusieurs frameworks JavaScript populaires ont adopté l'Incremental Static Regeneration (ISR) pour améliorer les performances de leurs applications. Parmi les plus connus, on trouve Next.js, basé sur React, ainsi que Nuxt.js, basé sur Vue.js. Ces frameworks ont intégré l'ISR en tant que fonctionnalité clé, permettant aux développeurs de bénéficier des avantages de cette technique sans avoir à la mettre en œuvre manuellement.

Comment l'Incremental Static Regeneration (ISR) fonctionne-t-il ?

L'Incremental Static Regeneration (ISR) est un mélange de génération static et de régénération dynamique.

Lors du build du site (voir notre précédent article) toutes les pages sont générées de manière statique. Cependant, certaines peuvent être "marquées" : ces pages clairement identifiées seront régénérées à intervalle régulier après le déploiement du site, faisant appel à des API ou une base de données pour garder la donnée à jour.

Lors de la visite d'une page à régénérer, une version "ancienne" de la page s'affiche, mais une demande de régénération est envoyée au serveur. La page est ainsi régénérée et renvoyée instantanément au visiteur, et prête à être affichée au visiteur suivant. Le cycle peut alors recommencer.

Fonctionnement de l'ISR (source)

Quels sont les avantages de l'Incremental Static Regeneration (ISR) ?

1/ Des performances améliorées et des temps de (re-)génération plus court

L'Incremental Static Regeneration (ISR) permet une génération initiale rapide des pages, améliorant ainsi les temps de chargement et l'expérience utilisateur.

Si le site ne nécessite uniquement des mises à jour de contenu, en limitant les pages ciblées par la re-génération, le temps de build du site est largement réduit. Un build complet n'est plus nécessaire.

2/ Des mises à jour de contenus instantanées

Les changements de contenus peuvent être reflétés presque instantanément sur le site, sans sacrifier la vitesse.

3/ Des économies de ressources

Par rapport aux techniques de rendu dynamique déjà vu Client Side Rendering et Server Side Rendering, l'Incremental Static Regeneration (ISR) limite la sollicitation serveur.

Quels sont les points faibles de l'Incremental Static Regeneration (ISR) ?

1/ Une complexité accrue

La mise en place de l'Incremental Static Regeneration (ISR) peut être plus complexe que les méthodes traditionnelles de rendu, notamment en ce qui concerne la gestion des pages à régénérer ou des intervalles de régénération.

2/ Une expérience utilisateur variable

La visite d’une page en cours de régénération peut générer un "sursaut" du site lors de la mise à jour de page. De plus, des problèmes de disponibilité de contenu peuvent se produirent en cas d'erreur lors du processus de régénération.

3/ Une mise en pratique limitée

Tous les cas d'utilisation ne sont pas adaptés à l'Incremental Static Regeneration (ISR), en particulier les applications fortement interactives. En effet, plus le nombre de pages nécessitant une régénération augmente, plus le serveur sera sollicité, entraînant d'éventuelles surcharges.

La mise à jour régulière à l'échelle d'une page de l'Incremental Static Regeneration (ISR) se distingue comme une innovation majeure dans le domaine du rendu web, offrant une solution optimale pour concilier la rapidité du rendu statique avec la souplesse des mises à jour dynamiques. Grâce à cette technique, des frameworks JavaScript tels que Next.js et Nuxt.js ont réussi à proposer des performances exceptionnelles tout en répondant aux exigences évolutives des applications modernes.

Toutefois, alors que l'Incremental Static Regeneration (ISR) continue de façonner l'avenir du développement web, il sera bientôt possible d'aller encore plus loin faisant des mises à jour à l'échelle du composant avec les Server Components (SC).