Le guide pour l’ISR à la demande

La régénération statique incrémentielle (ISR) n’est pas seulement une mise en cache, mais la possibilité de mettre en cache et de revalider le cache sur le CDN une fois qu’il expire. La partie à la demande pourrait changer la donne.

La régénération statique incrémentielle (ISR) est un outil incroyable pour mettre en cache vos données sur un CDN. La technologie a été lancée en 2020 par Vercel et conçue spécifiquement pour Next.js. Cependant, depuis lors, il a commencé à s’adapter à différents frameworks sur différents environnements d’hébergement. C’est très utile et pourrait vous faire économiser des milliers de dollars en coûts d’hébergement et de base de données.

La mise en cache existe depuis longtemps sur les environnements serveurs. Avec Cache-Control en-têtes, vous avez la possibilité de sauvegarder votre état pendant une durée sélectionnée. Tout ce que vous avez à faire est de renvoyer l’en-tête approprié dans la langue que vous avez désignée (PHP, Node.js, etc.).

Cache-Control: max-age=<seconds>

ou si vous utilisez un proxy :

Cache-Control: s-maxage=<seconds>

Les données sont récupérées une fois, puis enregistrées dans le cache du serveur. Lorsque le cache expire, il sera récupéré à nouveau. Vous pouvez également afficher le dernier cache et le récupérer en arrière-plan lorsque le cache expire. Cela évite que le premier utilisateur après l’expiration du cache n’ait à attendre que le contenu se régénère. Vous pouvez spécifier l’heure d’affichage de l’ancien cache.

Cache-Control: stale-while-revalidate=<seconds>

Il y en a bien d’autres en-têtes de contrôle de cache disponible.

Problèmes

La mise en cache est extrêmement utile, mais en fin de compte, elle n’est pas aussi robuste que la mise en cache CDN. Les caches ne sont pas partagés entre les régions et vous ne pouvez revalider le cache que lorsqu’il expire. Il y a autres différences par rapport à l’ISR à noter également. Ceci étant dit, si la revalidation ne vous intéresse pas, cache-control est un excellent outil.

Purge

Avant que le terme « revalidation à la demande » ne soit inventé, les CDN revalidaient un cache en purge il. Habituellement, vous deviez le faire via le tableau de bord CDN, mais vous pouvez également utiliser des en-têtes.

Tous les CDN ne peuvent pas être purgés par une requête d’en-tête, mais cela a définitivement ouvert la voie à ce que fait Vercel.

Vercel ISR

Vercel, qui utilise Cloudflare sous le capot, a décidé de créer sa propre technique de mise en cache appelée Régénération statique incrémentielle. Fondamentalement, il est mis en cache pendant un certain nombre de secondes, puis il se revalide progressivement en arrière-plan à l’aide d’un obsolète lors de la revalidation technique.

Vous pouvez le faire sans cadre avec le Créer une API de sortie. La documentation n’est pas claire sur son utilisation sans framework, mais vous pouvez voir le exemple de dépôt. ISR fonctionne à la fois sur les fonctions sans serveur et Fonctions de bord sur le réseau Edge.

ISR à la demande

Ce qui rend ISR vraiment incroyable, c’est la possibilité de revalider le cache à la demande. Cela signifie que vous pouvez mettre à jour la base de données, puis revalider votre cache par programme sans avoir à toucher manuellement un tableau de bord ou à redéployer votre projet. La technologie a été intégrée aux frameworks pour faciliter la tâche des développeurs.

Suivant.js

Pour Suivant.js:

revalidatePath("https://www.telerik.com/");

Tous les chemins sont mis en cache par défaut jusqu’à ce que vous les revalidiez. Vous ne pouvez cependant pas revalider un chemin sur lequel vous vous trouvez actuellement. Cela signifie que vous devez revalider à partir d’une autre URL.

Actions du serveur, par exemple, sont créés sur l’URL actuelle, vous devrez donc écrire votre code en conséquence. Cela fonctionne maintenant avec le répertoire d’applications aussi. Vous pourriez et devriez probablement également écrire votre code pour valider une clé ou un jeton avant que la fonction ne soit appelée pour des raisons de sécurité.

SvelteKit

SvelteKit utilise un jeton par défaut. Pour créer le cache, placez ceci en haut du fichier serveur que vous souhaitez mettre en cache :

export const config = {
    isr: {
        expiration: false,
        bypassToken: BYPASS_TOKEN
    }
};

Et dans un autre fichier, vous pouvez le revalider en appelant le même fichier avec cet en-tête :

await fetch("https://www.telerik.com/", {
    headers: {
        'x-prerender-revalidate': BYPASS_TOKEN
    }
});

Encore une fois, vous devez revalider à partir d’une URL différente. Vous pouvez également vérifier les résultats de la récupération pour vous assurer qu’elle s’est terminée avec succès.

Autres cadres

Alors que D’autres cadres prennent en charge ISR, je n’ai pas trouvé d’exemple d’autres frameworks prenant en charge l’ISR à la demande. Encore une fois, cela devrait être possible sur Vercel de le créer manuellement à l’aide du Créer une API de sortie, mais ce n’est peut-être pas facile à mettre en œuvre. Il faudrait probablement être ajouté au Adaptateur Vercel pour chaque cadre. Cela faciliterait les développeurs américains. Nous pourrions le constater avec le temps.

Autres fournisseurs d’hébergement

Depuis que Next.js, une création de Vercel, prend en charge ISR comme framework, d’autres fournisseurs d’hébergement ont lentement publié leur version d’ISR. React et Next.js sont extrêmement populaires en dehors de Vercel. Néanmoins, aucun d’entre eux ne prend en charge l’ISR à la demande.

Netlifier

Netlifier prend en charge ISR, mais ne semble pas se soucier de prendre en charge la revalidation à la demande ; ils seraient le fournisseur qui, à notre avis, le soutiendrait. N’oubliez pas qu’ISR n’est pas seulement une mise en cache, mais la possibilité de mettre en cache et de revalider le cache sur le CDN une fois celui-ci expiré.

Quelqu’un de Netlify a écrit un article complet expliquant pourquoi la revalidation à la demande n’est pas géniale. N’est-ce pas au développeur de décider ? Tout l’argument repose sur les problèmes d’affichage d’une ancienne version d’une page. En fin de compte, cela pourrait être résolu dans de bonnes conditions.

Je pense que l’article a probablement été écrit lorsque Netlify a décidé de ne plus donner de ressources pour créer un support. Quoi qu’il en soit, le constructeurs à la demande sont une partie vitale de Netlify, qui n’existait pas avant cette période.

Hébergement Firebase

Firebase prend en charge ISR ainsi, en utilisant Fonctions cloud Firebase et Rapidement CDN sous la capuche. Cependant, il ne prend pas en charge la revalidation à la demande et semble fonctionner uniquement pour Next.js, pas pour SvelteKit.

Cloudflare/Tout environnement

Bien que Cloudflare ne soit pas différent et ne prenne pas en charge le framework pour ISR, quelqu’un a créé un article sur l’utilisation Régénération statique incrémentielle sur les travailleurs Cloudflare. Cloudflare Workers ne sont que des fonctions de périphérie qui n’ont pas besoin d’être démarrées à froid comme d’autres types d’environnements sans serveur.

Cloudflare a un Magasin KV, qui est disponible mondialement comme le serait un cache Redis. Fondamentalement, vous pouvez utiliser une sorte de KV Store ou Redis pour mettre en cache vos données et revalider le cache à la demande.

Cela pourrait être comparablement rapide à ISR en fonction de votre région, du serveur et de la base de données utilisés. Upstash a écrit un article comparaison de Redis et Cloudflare Workers KV.

Si vous ne voulez pas être dépendant d’un fournisseur, c’est votre meilleur pari. Ils sont tous finalement cohérents tout comme l’ISR sur Vercel.

Dernières pensées

La régénération statique incrémentielle est une technologie incroyable, mais c’est la partie à la demande qui brille vraiment. Malheureusement, cela n’est disponible que sur Vercel et ne fonctionne directement qu’avec Next.js et SvelteKit.

Cependant, l’utilisation d’une base de données Edge pourrait être tout aussi utile. Si j’utilise une base de données comme Firebase, où je suis facturé par lecture, cela pourrait me faire économiser des milliers de dollars tout en étant beaucoup plus rapide. Si j’utilise une base de données qui ne s’allonge pas bien, cela pourrait contrôler mon serveur. Si je souhaite économiser de l’argent sur les itérations de fonctions, l’utilisation des techniques de mise en cache Vercel pourrait également me permettre d’économiser de l’argent. Dans l’ensemble, cela vous permet d’économiser de l’argent et rend votre site plus rapide.

Vous devriez l’utiliser.