SWR

Le nom "SWR" vient de stale-while-revalidate (obsolète lors de la réactualisation), une stratégie d'invalidation du cache HTTP popularisée par HTTP RFC 5861 (opens in a new tab). SWR est une stratégie qui consiste à d'abord renvoyer les données du cache (obsolètes), puis à envoyer la requête fetch (réactualiser), et enfin à revenir avec les données à jour.

Vue d'ensemble

import useSWR from 'swr'
 
function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
  if (error) return <div>échec du chargement</div>
  if (isLoading) return <div>chargement...</div>
  return <div>Salut {data.name}!</div>
}

Dans cet exemple, le hook useSWR accepte un string key et une fonction fetcher. key est un identifiant unique de la donnée (normalement l'URL de l'API) et sera passé à fetcher. fetcher peut être n'importe quelle fonction asynchrone qui renvoie la donnée, vous pouvez utiliser le fetch natif ou des outils comme Axios.

Le hook renvoie 2 valeurs: data et error, en fonction du statut de la requête.

Fonctionnalités

Avec une seule ligne de code, vous pouvez simplifier la logique de récupération des données dans votre projet, et aussi avoir toutes ces fonctionnalités incroyables prêtes à l'emploi:

• Récupérateur de donnée rapide, léger et réutilisable
• Built-in cache et requête deduplication
• Expérience en temps réel
• Transport et protocole agnostique
• Support SSR / ISR / SSG
• TypeScript prêt à l'emploi
• React Native

SWR est également livré avec un ensemble d'outils pour vous aider à créer des expériences plus rapides et plus fluides:

• Navigation rapide entre les pages
• Demande sur intervalle
• Dépendance de données
• Réactualisation après focus
• Réactualisation après récupération du réseau
• Mutation locale (UI optimiste)
• Nouvelle tentative automatique
• Récupération de la pagination et du défilement
• React Suspense

Et bien plus.

Communauté

SWR est créé par l'équipe derrière Next.js (opens in a new tab), le framework React. Suivez @vercel (opens in a new tab) sur Twitter pour les futures mises à jour du projet.

N'hésitez pas à rejoindre les discussions sur GitHub (opens in a new tab)!