ISR est une méthode de rendu hybride dans Next.js, qui est utile pour le référencement et l'amélioration de l'expérience utilisateur. Dans cet article, je vais expliquer comment ISR fonctionne dans Next.js, afficher des exemples de mise en œuvre de l'ISR dans le routeur de page et le routeur de l'application, et enfin, aborder quelques questions courantes sur ISR dans Next.js.

Qu'est-ce que ISR?

ISR est une méthode de rendu hybride dans next.js. Il régénère des pages statiques à des intervalles spécifiques, ce qui aide à SEO et améliore l'expérience utilisateur en gardant le contenu à jour sans reconstruire le site entier.

Comment ISR améliore-t-il le référencement et l'expérience utilisateur?

Si vous avez utilisé React.js ou une application traditionnelle à page unique (SPA), vous savez qu'il n'y a généralement qu'un seul fichier HTML dans un spa. Lorsqu'un utilisateur visite d'abord un site Web de SPA, le SPA envoie un fichier HTML minimal (dans React, il s'agit généralement d'index.html). Après cela, il récupère CSS, JavaScript et autres ressources nécessaires pour la page demandée. Ces ressources sont ensuite rendues et combinées dans le HTML une fois qu'elles atteignent le client (le navigateur). Cependant, comme mentionné précédemment, le fichier HTML initial envoyé par un spa contient peu ou pas de contenu.

Maintenant, imaginez un bot Google demandant le site Web au lieu d'un utilisateur. Bien que les bots Google modernes puissent exécuter JavaScript pour récupérer du contenu, le fait de s'appuyer uniquement sur cela peut encore avoir un impact négatif sur le référencement. Le bot peut voir le HTML initial comme vide, ce qui pourrait retarder l'indexation du contenu de la page, potentiellement nuire à votre classement de recherche.

next.js résout cela en utilisant des techniques de rendu côté serveur, telles que le pré-rendu du serveur. Nous parlerons du rendu en détail plus tard, mais voici un bref aperçu. Avec le pré-rendu du serveur, le HTML pour chaque itinéraire est généré sur le serveur et envoyé directement au client. Les fichiers CSS et JavaScript sont généralement groupés et mis en cache.

Donc, lorsqu'un utilisateur ou un bot Google visite le site, il voient immédiatement une page entièrement rendue. Cela améliore le référencement car le bot Google peut voir instantanément le contenu du HTML. Il améliore également l'expérience utilisateur en accélérant les charges de page, ce qui signifie que les utilisateurs n'ont pas à attendre que le contenu se charge dynamiquement.

Comment fonctionne ISR?

Si vous voulez mieux comprendre comment ISR (régénération statique incrémentale) fonctionne, permettez-moi de vous expliquer avec un exemple. Imaginez que vous êtes un administrateur qui gère une liste de blogs sur votre site Web. Vous ne voulez pas reconstruire votre projet chaque fois que vous publiez un nouveau blog. Au lieu de cela, vous voulez que votre page de liste de blogs se mette à jour automatiquement, disons, toutes les 60 secondes. Donc, lorsque vous écrivez un nouveau blog, vous voulez qu'il apparaisse sans reconstruire manuellement votre projet. C'est là que ISR entre en jeu. Bien que vous puissiez utiliser des méthodes comme SSR (rendu côté serveur), si vous voulez que votre site Web se mette à jour à des intervalles spécifiques, ISR est la voie à suivre. Nous parlerons de SSR plus tard.

Maintenant, disons que vous implémentez ISR sur votre page de blog et définissez le temps de revalidation à 60 secondes. Vous construisez votre projet pour la première fois et le temporisateur de revalidation commence. Un utilisateur visite votre site Web, se rend sur la page de la liste des blogs et voit la liste actuelle des blogs. Pendant ce temps, vous publiez un nouvel article de blog, mais comme il reste encore 20 secondes dans la fenêtre de 60 secondes, les nouveaux utilisateurs visitant le site ne verront pas encore le nouveau blog.

Une fois les 60 secondes en hausse, ISR vérifie les nouvelles données, voit qu'il y a un nouvel article de blog et régénère la page statique avec le contenu mis à jour. Il cache ensuite la nouvelle version sur le serveur. Voici quelque chose d'important à noter: alors que ISR régénère la page, les utilisateurs voient toujours l'ancienne version jusqu'à ce que la nouvelle soit prête. Ainsi, une fois ISR terminé, tous les nouveaux visiteurs verront la page mise à jour, mais les utilisateurs qui étaient déjà sur le site avant la revalidation verront toujours l'ancienne page à moins qu'ils ne le rafraîchissent.

Une autre chose clé à retenir est que lorsque vous créez votre site Web à l'aide de NPM Run build, la page statique initiale est générée par SSG (génération de site statique), pas ISR. Après la première construction, ISR entre en jeu pour gérer le processus de régénération. De plus, ISR ne régénére pas l'ensemble de votre site; Il régénère uniquement la page spécifique où ISR est implémenté. Ainsi, lorsque ISR se régénère, seule cette page spécifique est mise à jour, pas l'ensemble du projet.

Comment implémenter ISR dans le routeur de l'application

Pour implémenter ISR (régénération statique incrémentielle) dans le routeur de l'application, il est important de savoir que ISR doit être utilisé dans les composants du serveur, pas les composants du client. En effet, ISR est une méthode de rendu de serveur, pas une méthode côté client. Vous devez donc placer ISR dans des fichiers comme App / Blog / Page.TSX ou App / Blog / Page.jsx.

Un point clé à retenir est que si vous n'appelez pas votre API dans le composant du serveur où l'option Revalider est définie, ISR ne fonctionnera pas. Le composant du serveur doit être en mesure de récupérer de nouvelles données afin de régénérer la page, sinon aucune mise à jour ne se produira.

Pour activer ISR, il vous suffit d'ajouter la propriété Revalider à la méthode Fetch. Si vous préférez utiliser Axios au lieu de récupérer, vous pouvez toujours l'utiliser en configurant la demande de la même manière, mais pour l'instant, je m'en tiendrai à l'utilisation de Fetch. Peut-être plus tard, je vais expliquer comment le faire avec Axios.

J'ai fourni un exemple avec le fichier TSX et JSX Fiel:

Ceci est un exemple d'implémentation dans le fichier tsx

Ceci est un exemple d'implémentation dans le fichier jsx:

Comment implémenter ISR dans le routeur de page?

Pour implémenter ISR dans le routeur de page, vous devez exporter GetStaticProps à partir de votre composant et ajouter la propriété Revalider à cette fonction. Cette fonction ne s'exécute que pendant le rendu côté serveur, vous devez donc vous assurer d'appeler votre API à l'intérieur de GetStaticProps. Comme mentionné dans la section précédente, vous pouvez utiliser Fetch ou Axios pour récupérer vos données, mais gardez à l'esprit que l'appel API doit être fait à l'intérieur de GetStaticProps, ou bien ISR ne fonctionnera pas.

Encore une fois, cette fonction est exécutée sur le serveur, pas le client. Voici un exemple pour démontrer:

Ceci est un exemple d'implémentation dans le fichier tsx:

Ceci est un exemple d'implémentation dans le fichier jsx:

Conclusion

ISR dans next.js est une méthode de rendu de serveur qui améliore à la fois le référencement et l'expérience utilisateur.
Vous pouvez créer votre composant à l'aide d'autres méthodes comme SSR ou SSG, mais parfois ISR est nécessaire pour des cas d'utilisation spécifiques.

Vous devez avoir une bonne compréhension de ce qu'est ISR, comment cela fonctionne et comment l'implémenter à la fois dans le routeur de page et le routeur d'application. Dans cet article, j'ai essayé de l'expliquer aussi clairement que possible, et je le mettrai à jour plus tard si je peux l'expliquer encore mieux. Si quelque chose n'est pas clair, veuillez me le faire savoir en laissant un commentaire, et je vais fournir des éclaircissements supplémentaires.

Merci d'avoir lu ce blog, et j'espère que vous l'avez apprécié!