Si vous êtes développeur web, vous savez sûrement à quel point il est important d'avoir un site rapide et réactif pour offrir une expérience utilisateur optimale. Dans cet article, nous allons vous présenter comment mettre en place la revalidation sur-demande avec NextJS, une fonctionnalité qui permet de rafraîchir les données de votre site uniquement lorsque cela est nécessaire. Grâce à cette méthode, vous pourrez économiser des ressources et améliorer la performance de votre site web, tout en offrant des données à jour à vos utilisateurs.
Nous allons vous guider pas à pas dans la mise en place de cette fonctionnalité, en utilisant des exemples concrets et des explications détaillées. Voyons sans plus attendre comment mettre en place la revalidation sur-demande avec NextJS.
La génération statique ?
NextJS est sans aucun doute la technologie la plus utilisée du moment, tout du moins, pour la création de sites internet avec React.
L'une des plus grandes force de ce framework réside dans ses fonctionnalités permettant de réaliser un site internet optimisé pour le référencement et pour la vitesse d'affichage.
Cette vitesse est possible grâce - notamment - à la génération de pages statiques.
Ces pages sont en fait "créées" à l'avance au moment de la mise en ligne du site internet (ou lors d'une mise à jour de son code). À la différence d'une page "classique" généralement créée à chaque demande d'un nouveau visiteur, une page statique sera réutilisée à chaque fois. Il n'y a plus besoin de recréer la page à chaque visite.
Vu sous cet angle, nous pourrions donc nous dire que tout serait mieux dans le meilleur des mondes en rendant toutes nos pages statiques... Oui. Mais non.
Le problème avec la génération statique des pages
Il réside en réalité un problème important avec les pages statiques : elles ne sont plus du tout modifiées une fois qu'elles ont été créées. Ce qui - plus simplement - veut donc dire que lorsque vous écrivez un article de blog par exemple, et que vous modifiez cet article depuis votre espace de rédaction... la mise à jour de cet article ne s'affichera jamais pour vos visiteurs.
En effet la page est déjà créée, elle est figée dans le temps. Il faudrait donc théoriquement refaire une installation complète de votre site internet pour voir les modifications sur votre article. Il s'agit d'une solution très longue et coûteuse en temps, voir impossible si nous avons un gros projet avec des modifications sur nos pages statiques toutes les trois minutes.
Il existait une solution assez simple : celle d'utiliser la propriété revalidate avec une valeur en secondes, afin de préciser à NextJS qu'il fallait recréer la page au bout de x secondes lorsqu'un utilisateur se trouve dessus.
Le problème de cette solution est le suivant :
- plus votre délai est court, plus la génération statique perd de son intérêt : si vous regénérez votre page toutes les secondes, inutile de dire que l'on perd en performance et qu'on finit par faire de la génération à la volée comme les pages "classiques" ;
- plus votre délai est long, plus vos visiteurs vont devoir attendre pour voir la dernière mise à jour de votre page : imaginez-vous attendre qu'une page se recharge au bout d'une heure après avoir modifié des fautes d'orthographe par exemple et vous comprendrez à quel point ce n'est pas la solution.
La solution miracle : la génération sur-demande
C'est là que vient la solution miracle : la génération sur-demande.
Il s'agit d'une fonctionnalité qui est apparue dans la version 12.2.0 de NextJS. Elle nous permet enfin de générer une page statique à la mise en ligne de notre site internet, et de la regénérer quand on lui aura demandé : lorsqu'on modifie un article, par exemple.
Grâce à cette fonctionnalité, vous pourrez proposer tous vos articles, toutes vos pages de vente, tous vos produits, de manière statique ; tout en vous permettant d'avoir toujours vos pages intégralement mises à jour.
Comment marche la génération sur-demande de NextJS ?
Pour comprendre comment fonctionne la génération sur-demande, regardons ensemble ces étapes :
- L'article est modifié ;
- Nous envoyons une requête à notre API pour modifier les données de notre article ;
- Une fois que la modification a été effectuée avec succès, nous appelons une seconde API, pour lui dire de regénérer la page de l'article modifié.
- L'article est entièrement regénéré, votre mise à jour est prise en compte, votre page sera désormais réutilisée pour chaque utilisateur. Vous gagnez en vitesse d'affichage et donc en référencement.
Comment l'implémenter ?
Pour utiliser la fonctionnalité de génération sur-demande, vous devez commencer par créer une clé de sécurité.
Une clé de sécurité est une sorte de code que vous devrez fournir à NextJS pour s'assurer que seul vous et personne d'autre n'aura la possibilité de regénérer les pages demandées en accédant à votre url.
Je vous invite à créer cette variable dans votre fichier .env ou encore next.config.js :
NEXT_REVALIDATION: "CODE";Bien entendu, je vous laisse modifier la valeur de ce code.
Il faut maintenant créer l'API nous permettant de regénérer la page que nous demanderons. Le voici - /api/next/revalidate.js (ou n'importe quel autre nom) :
export default async function handler(req, res) {
// Check for secret to confirm this is a valid request
if (req.query.secret != process.env.NEXT_REVALIDATION) {
return res.status(401).json({ message: "Code faux" });
}
// Check for data
const { path } = req.body;
if (!path) {
res.status(400).json({
message: "Un champ obligatoire est manquant.",
});
return;
}
try {
await res.revalidate(path);
return res.json({ revalidated: true });
} catch (err) {
return res.status(500).send("Error revalidating");
}
}Dans la première partie de ce code, nous vérifions si le code est bien reçu dans l'url, puis enfin nous vérifions si le code est effectivement celui que nous avons paramétré dans notre configuration.
if (req.query.secret != process.env.NEXT_REVALIDATION) {
return res.status(401).json({ message: "Code faux" });
}Ensuite, il est important que nous vérifions si nous recevons bien le path. C'est le chemin de la page que nous souhaitons générer de nouveau.
const { path } = req.body;
if (!path) {
res.status(400).json({
message: "Un champ obligatoire est manquant.",
});
return;
}Une fois que nous savons que la personne qui demande a regénérer la page est bien autorisée à le faire, puis que nous avons le chemin de la page que nous voulons regénérer, il ne reste plus qu'à en faire la demande à NextJS.
try {
await res.revalidate(path);
return res.json({ revalidated: true });
} catch (err) {
return res.status(500).send("Impossible de recréer cette page.");
}Comme nous faisons les choses dans les règles de l'art, nous demandons à NextJS cette regénération dans une condition try catch : si un problème intervient, on arrête le code est on fait un message d'erreur.
Désormais, il ne reste plus qu'à appeler votre nouvelle API - /api/next/revalidate?secret=CODE en passant la page que vous désirez regénérer dans la variable path (avec la méthode POST dans notre petit exemple) pour regénérer une page qui sera intégralement mise à jour.
Allez, pour vous aider, voici ce que ça donne :
const valid = await fetch(
`https://website.com/api/next/revalidate?secret=${process.env.NEXT_REVALIDATION}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
path: `/r/${slug}`,
}),
},
);
const revalidation = await valid.json();
if (!valid.ok) {
res.status(400).json({
message: revalidation.message,
});
return;
}Pour en savoir plus, commencez donc gratuitement notre formation dédiée entièrement à NextJS !
