La philosophie Stale-While-Revalidate

SWR est une bibliothèque de data fetching pour React développée par Vercel (l'équipe derrière Next.js). Son nom, SWR, est l'acronyme de Stale-While-Revalidate, qui décrit sa stratégie de mise en cache fondamentale et sa principale philosophie. L'idée est d'offrir une expérience utilisateur rapide et toujours à jour.

Le principe est le suivant : lorsque vous demandez des données avec SWR, il essaie d'abord de servir immédiatement une version potentiellement "périmée" (stale) des données depuis son cache local, s'il en existe une. Presque simultanément, il lance une requête en arrière-plan pour récupérer (revalidate) la version la plus fraîche des données depuis l'API. Une fois ces nouvelles données obtenues, SWR met à jour le cache et l'interface utilisateur avec les informations fraîches.

Cette approche permet d'afficher quelque chose très rapidement à l'utilisateur (les données du cache, même si légèrement anciennes), tout en garantissant que l'interface sera éventuellement mise à jour avec les données les plus récentes. SWR gère automatiquement ce cycle complexe, ainsi que de nombreuses autres optimisations.

Le hook `useSWR` : Clé, fetcher et état retourné

L'utilisation principale de SWR se fait via son hook `useSWR`. La signature de base est la suivante :

const { data, error, isLoading, isValidating, mutate } = useSWR(key, fetcher, options);

• `key` : C'est un identifiant unique pour la requête et les données associées. Le plus souvent, c'est simplement l'URL de l'API (une chaîne de caractères). Cependant, la clé peut aussi être un objet, un tableau ou même `null` (ou une fonction retournant `null`) pour désactiver temporairement la requête (fetching conditionnel). SWR utilise cette clé pour mettre en cache les données. Si la clé change, `useSWR` déclenchera une nouvelle requête.
• `fetcher` : C'est une fonction asynchrone qui prend la `key` en argument et est responsable d'effectuer la récupération effective des données. Elle doit retourner les données souhaitées (généralement après un appel `fetch` ou `axios`). Si la requête échoue, le fetcher doit lever une erreur. Vous définissez généralement une fonction fetcher globale ou en passez une spécifique.
• `options` (optionnel) : Un objet permettant de configurer le comportement de `useSWR` (stratégies de revalidation, gestion des erreurs, etc.).

Le hook `useSWR` retourne un objet contenant plusieurs états utiles :

• `data` : Les données retournées avec succès par le `fetcher` (ou les données du cache). `undefined` s'il n'y a pas encore de données ou si une erreur s'est produite lors du chargement initial.
• `error` : Un objet d'erreur si le `fetcher` a levé une erreur.
• `isLoading` : Un booléen indiquant si c'est la toute première requête pour cette `key` et qu'il n'y a pas encore de données (ni dans le cache, ni retournées). Utile pour afficher un squelette de chargement initial.
• `isValidating` : Un booléen indiquant si une requête de revalidation est en cours (même si des données périmées `data` sont déjà affichées). Utile pour afficher un indicateur de chargement plus subtil lors des mises à jour en arrière-plan.
• `mutate` : Une fonction pour déclencher manuellement une revalidation des données ou pour mettre à jour le cache local de manière optimiste.

Exemple d'utilisation basique

Voyons comment utiliser `useSWR` pour récupérer le profil d'un utilisateur. D'abord, on définit souvent un `fetcher` générique :

// utils/fetcher.js ou api.js
// Fonction fetcher simple utilisant fetch
export const fetcher = async (url) => {
  const res = await fetch(url);
  if (!res.ok) {
    const error = new Error('Une erreur est survenue lors de la récupération des données.');
    // Attache des informations supplémentaires à l'erreur
    error.info = await res.json();
    error.status = res.status;
    throw error;
  }
  return res.json();
};

Ensuite, dans le composant :

import React from 'react';
import useSWR from 'swr';
import { fetcher } from '../utils/fetcher'; // Importer le fetcher

function UserProfile({ userId }) {
  // La clé est l'URL de l'API, elle change si userId change
  const key = userId ? `/api/users/${userId}` : null; // Fetching conditionnel si pas de userId

  const { data: user, error, isLoading } = useSWR(key, fetcher);

  if (isLoading) return 
Chargement du profil...
;
  if (error) return 
Erreur lors du chargement : {error.message}
;
  // Si la clé est null (pas de userId), data sera undefined, gérer ce cas
  if (!user) return 
Aucun utilisateur sélectionné ou trouvé.
 

  return (
    

      
Profil de {user.name}
      
Email: {user.email}
      {/* Afficher d'autres infos */} 
    
  );
}

export default UserProfile;

Ce code est beaucoup plus concis que l'implémentation manuelle avec `useEffect`. SWR gère pour nous le cycle de vie de la requête, les états `isLoading` et `error`, et le caching.

Avantages et fonctionnalités clés de SWR

• Simplicité : L'API basée sur le hook `useSWR` est très simple à utiliser.
• Mise en Cache Automatique : Les résultats sont mis en cache en utilisant la `key` fournie. Si un autre composant utilise `useSWR` avec la même clé, il obtiendra instantanément les données du cache.
• Revalidation Automatique : SWR revalide (re-fetch) automatiquement les données dans plusieurs scénarios pour garder l'UI à jour :
  • Au montage du composant.
  • Lorsque la fenêtre ou l'onglet récupère le focus.
  • Lorsque le réseau se reconnecte après une déconnexion.
  • Optionnellement, à intervalle régulier (polling).
• Gestion des Erreurs et Retries : Intègre une logique pour réessayer automatiquement les requêtes échouées avec un backoff exponentiel.
• Fetching Conditionnel : En passant `null` (ou une fonction retournant `null`) comme `key`, on peut désactiver la requête.
• Pagination et Chargement Infini : Fournit des hooks et des stratégies pour implémenter facilement ces patterns courants.
• Léger et Axé sur les Hooks : Se concentre sur le data fetching et s'intègre naturellement avec les hooks React.

SWR est une excellente option si vous recherchez une bibliothèque de data fetching simple, performante, basée sur les hooks et avec une stratégie de revalidation automatique agressive pour maintenir vos données fraîches. Elle est particulièrement bien adaptée aux applications où l'affichage rapide de données (même potentiellement périmées) est prioritaire.