Qu'est-ce que SWR et comment l'utiliser dans Next.js ?

Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. Lire la suite.

SWR (state-while-revalidate) est une méthode de récupération de données développée par Vercel. Cela fonctionne en récupérant d'abord les données, en envoyant une requête de récupération pour les revalider, puis en renvoyant les données mises à jour.

SWR est très puissant car il permet non seulement la récupération de données réutilisables, mais également la mise en cache, la pagination et la revalidation intégrées. À l'aide de SWR, un site Web affiche le contenu mis en cache pendant qu'il récupère le contenu à jour en arrière-plan.

Comment fonctionne SWR ?

Normalement, vous auriez récupérer des données à l'aide d'Axios ou de la méthode de récupération . Ces méthodes se connectent à la ressource de données, récupèrent et renvoient les données puis ferment la connexion. Cependant, SWR récupère les données différemment. Il fonctionne en trois étapes :

Corbeille supprimée accidentellement Windows 10

Renvoie les données obsolètes du cache.
Envoie la requête de récupération pour revalider les données.
Renvoie des données à jour.

SWR ne remplace pas l'API de récupération. Au lieu de cela, il vous permet de rendre le contenu mis en cache sur votre site dès que l'utilisateur visite et de mettre à jour ce contenu lorsqu'il devient obsolète.

Alors, comment SWR sait-il que le cache est invalide ? Via une réponse d'en-tête de contrôle de cache. La réponse a deux états : fraîche et obsolète. Un état frais signifie que le cache peut être réutilisé tandis qu'un état obsolète signifie qu'il est invalide. Vous spécifiez la durée pendant laquelle la réponse reste valide dans la directive max-age.

SWR considère que toute réponse en cache antérieure à max-age est invalide. Une fois que votre application affiche les données obsolètes en cache, SWR les revalide et renvoie de nouvelles données que vous pouvez utiliser pour mettre à jour la page.

Comment récupérer des données dans Next.js avec SWR

Commencez à utiliser SWR dans React en l'installant d'abord via un gestionnaire de packages. Cette commande utilise npm.

 npm install swr\n

Dans un fichier de composant, importez le hook useSWR à partir de swr.

 import useSWR from "swr"\n

Le hook useSWR accepte deux arguments :

Un identifiant unique pour les données. Généralement l'URL de l'API.
Une fonction de récupération. C'est la fonction utilisée pour récupérer les données. Il peut utiliser fetch, Axios ou d'autres outils de récupération de données.

Le crochet renvoie les données et un objet d'erreur. Assurez-vous utiliser ce crochet conformément aux bonnes pratiques .

Voici un exemple montrant comment utiliser le crochet useSWR.

 const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n

Vous pouvez afficher les données dans un composant comme celui-ci :

 import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n

Il s'agit d'une implémentation simple de SWR. Le Documents SWR allez plus en profondeur, alors consultez-les pour en savoir plus.

Pourquoi utiliser SWR ?

SWR présente de nombreux avantages par rapport aux autres méthodes de récupération de données.

Mise en cache

Avec les méthodes traditionnelles de récupération de données, vous devez utiliser un spinner ou un message de chargement pour améliorer l'expérience utilisateur lorsque l'application récupère des données.

SWR vous permet d'afficher des données obsolètes à l'utilisateur, pendant que vous les revalidez. Cela signifie que l'utilisateur n'a pas à attendre que le récupérateur renvoie les données.

Revalidation

Grâce à la revalidation, SWR actualise à nouveau les données mises en cache et la page est restituée avec des données à jour. La revalidation est particulièrement importante pour les sites dont le contenu change régulièrement.

Pagination

Le useSWRHook infini de SWR vous permet d'implémenter facilement la pagination ou même de créer une interface utilisateur de chargement infinie.

Récupération de la position de défilement

SWR permet à un utilisateur de revenir à la position de défilement sur une page lorsqu'il y revient. Cela contribue à une meilleure expérience utilisateur.

Récupération de données dépendantes

Vous pouvez récupérer des données qui dépendent d'autres données. Il vous permet d'utiliser les données renvoyées par une requête dans une autre requête.

Utilisez SWR pour améliorer la convivialité

SWR est un outil de récupération de données avec une fonction de revalidation automatique qui aide les applications à restituer le contenu mis en cache en attendant le contenu à jour. Les utilisateurs peuvent interagir immédiatement avec le contenu au lieu d'attendre que le serveur renvoie des données.

SWR vous aide également à créer une pagination, un chargement infini, une récupération de position de défilement et d'autres fonctionnalités complexes. Si vous récupérez des données qui nécessitent des mises à jour régulières, vous devriez certainement envisager de les utiliser.

quel est le meilleur mbr ou gpt