<p>Chez <strong>Drylead</strong>, nous intégrons ce type de mécanisme dans les applications que nous développons pour <strong>optimiser les performances</strong> tout en garantissant une <strong>UX irréprochable</strong>. Voici comment vous pouvez faire de même.</p>

<hr class="nml__editor__content__hr">

<h3 class="nml__editor__content__heading">Pourquoi utiliser SWR pour la pagination ?</h3>

<p>SWR (stale-while-revalidate) est une bibliothèque de gestion des données développée par <strong>Vercel</strong>, l'équipe derrière Next.js. Son nom provient d'une stratégie de cache HTTP : afficher d'abord les données en cache (stale), puis revalider en arrière-plan pour les mettre à jour. Cette approche offre une <strong>réactivité immédiate</strong> à l'utilisateur tout en garantissant la fraîcheur des données.</p>

<p>Pour la pagination et le scroll infini, SWR propose le hook <code>useSWRInfinite</code>, spécialement conçu pour charger des données <strong>au fur et à mesure</strong> — que ce soit via un bouton "Charger plus" ou un déclenchement automatique au scroll. Les avantages sont nombreux :</p>

<ul class="nml__editor__content__bullet__list"><li class="nml__editor__content__listItem"><p><strong>Cache intelligent</strong> : les pages déjà chargées sont conservées en mémoire, évitant des requêtes réseau inutiles</p></li><li class="nml__editor__content__listItem"><p><strong>Revalidation automatique</strong> : les données sont rafraîchies en arrière-plan quand l'utilisateur revient sur l'onglet</p></li><li class="nml__editor__content__listItem"><p><strong>Gestion d'erreur native</strong> : retry automatique en cas d'échec réseau</p></li><li class="nml__editor__content__listItem"><p><strong>Déduplication des requêtes</strong> : si plusieurs composants demandent les mêmes données, une seule requête est envoyée</p></li><li class="nml__editor__content__listItem"><p><strong>Légèreté</strong> : seulement ~4 KB gzippé, sans dépendance externe</p></li></ul>

<p>Comparé à des solutions comme React Query ou une implémentation manuelle avec <code>useEffect</code>, SWR offre un excellent équilibre entre simplicité et puissance, particulièrement dans un écosystème Next.js.</p>

<hr class="nml__editor__content__hr">

<h3 class="nml__editor__content__heading">Étape 1 : Installer SWR dans votre projet React</h3>

<p>Si ce n'est pas encore fait, ajoutez SWR à votre projet :</p>

<pre class="nml__editor__content__code__block"><code>npm install swr
# ou
yarn add swr</code></pre>

<p>SWR est compatible avec React 16.11+, Next.js, et fonctionne aussi bien en SSR qu'en CSR. Aucune configuration globale n'est nécessaire pour démarrer, bien qu'un <code>SWRConfig</code> au niveau de votre application permette de définir des options par défaut (fetcher, intervalle de revalidation, etc.).</p>

<h3 class="nml__editor__content__heading">Étape 2 : Configurer le fetcher et la fonction de récupération</h3>

<p>SWR nécessite une fonction <strong>fetcher</strong> qui prend une URL en paramètre et retourne les données. Voici un exemple basé sur Axios, mais vous pouvez utiliser <code>fetch</code> ou toute autre bibliothèque HTTP :</p>

<pre class="nml__editor__content__code__block"><code>import useSWRInfinite from 'swr/infinite';
import axios from 'axios';

// Fetcher générique — réutilisable dans tout votre projet
const fetcher = (url) => axios.get(url).then((res) => res.data);

// Vous pouvez aussi passer des headers d'authentification
const authenticatedFetcher = (url) =>
  axios.get(url, {
    headers: { Authorization: `Bearer ${token}` }
  }).then((res) => res.data);</code></pre>

<p>Le fetcher est la pierre angulaire de SWR. En le définissant une seule fois (par exemple dans un <code>SWRConfig</code> global), vous n'avez plus à le passer à chaque appel. C'est une bonne pratique qui simplifie votre code et centralise la logique d'appel API.</p>

<h3 class="nml__editor__content__heading">Étape 3 : Implémenter useSWRInfinite</h3>

<p>Le hook <code>useSWRInfinite</code> est le cœur du mécanisme. Il gère automatiquement l'index de page et l'accumulation des résultats :</p>

<pre class="nml__editor__content__code__block"><code>const PAGE_SIZE = 10;

const getKey = (pageIndex, previousPageData) => {
  // Retourner null signale qu'il n'y a plus de données à charger
  if (previousPageData && !previousPageData.length) return null;

  // La clé est l'URL de la page à charger (pageIndex commence à 0)
  return \`/api/data?page=\${pageIndex + 1}&limit=\${PAGE_SIZE}\`;
};

const { data, error, size, setSize, isValidating, mutate } =
  useSWRInfinite(getKey, fetcher, {
    initialSize: 1,           // Nombre de pages chargées initialement
    revalidateFirstPage: true, // Revalider la première page à chaque changement
    persistSize: false,        // Réinitialiser la taille quand la clé change
  });

// États dérivés utiles
const isLoadingInitialData = !data && !error;
const isLoadingMore =
  isLoadingInitialData ||
  (size > 0 && data && typeof data[size - 1] === 'undefined');
const isEmpty = data?.[0]?.length === 0;
const isReachingEnd =
  isEmpty || (data && data[data.length - 1]?.length < PAGE_SIZE);
const isRefreshing = isValidating && data && data.length === size;</code></pre>

<p>Quelques points importants à retenir :</p>

<ul class="nml__editor__content__bullet__list"><li class="nml__editor__content__listItem"><p>La fonction <code>getKey</code> reçoit l'index de la page et les données de la page précédente. Retourner <code>null</code> indique qu'il n'y a plus de pages.</p></li><li class="nml__editor__content__listItem"><p><code>size</code> représente le nombre de pages actuellement chargées. <code>setSize</code> permet d'en demander plus.</p></li><li class="nml__editor__content__listItem"><p><code>mutate</code> permet de revalider manuellement les données (utile après une modification côté serveur).</p></li><li class="nml__editor__content__listItem"><p>L'état <code>isReachingEnd</code> est essentiel pour masquer le bouton "Charger plus" quand toutes les données sont affichées.</p></li></ul>

<h3 class="nml__editor__content__heading">Étape 4 : Affichage dans le composant</h3>

<p>L'intégration dans votre composant React est straightforward. Voici un exemple complet avec gestion des états de chargement et d'erreur :</p>

<pre class="nml__editor__content__code__block"><code>if (error) return <div>Erreur : {error.message}</div>;
if (!data) return <div>Chargement...</div>;

const allData = [].concat(...data);

return (
  <div>
    {allData.map((item) => (
      <div key={item.id}>
        {/* Rendu de vos données ici */}
      </div>
    ))}

    {/* Indicateur de chargement pour les pages suivantes */}
    {isLoadingMore && <div>Chargement de plus de données...</div>}

    {/* Bouton charger plus — masqué quand on atteint la fin */}
    {!isReachingEnd && (
      <button onClick={() => setSize(size + 1)} disabled={isLoadingMore}>
        Charger plus
      </button>
    )}

    {/* Message quand toutes les données sont affichées */}
    {isReachingEnd && !isEmpty && (
      <p>Toutes les données ont été chargées.</p>
    )}
  </div>
);</code></pre>

<h3 class="nml__editor__content__heading">Aller plus loin : le scroll infini avec Intersection Observer</h3>

<p>Pour transformer le bouton "Charger plus" en un véritable <strong>scroll infini</strong>, combinez <code>useSWRInfinite</code> avec l'API <code>IntersectionObserver</code>. Le principe : détecter quand un élément sentinelle devient visible dans le viewport, puis charger automatiquement la page suivante.</p>

<pre class="nml__editor__content__code__block"><code>import { useRef, useEffect, useCallback } from 'react';

const sentinelRef = useRef(null);

const handleIntersect = useCallback(
  (entries) => {
    if (entries[0].isIntersecting && !isLoadingMore && !isReachingEnd) {
      setSize((prev) => prev + 1);
    }
  },
  [isLoadingMore, isReachingEnd, setSize]
);

useEffect(() => {
  const observer = new IntersectionObserver(handleIntersect, {
    rootMargin: '200px', // Déclenche 200px avant que l'élément soit visible
  });
  if (sentinelRef.current) observer.observe(sentinelRef.current);
  return () => observer.disconnect();
}, [handleIntersect]);

// Dans votre JSX, ajoutez la sentinelle après la liste
// <div ref={sentinelRef} style={{ height: 1 }} /></code></pre>

<p>Le <code>rootMargin</code> de 200px déclenche le chargement légèrement en avance, ce qui donne l'illusion d'une liste infinie sans temps d'attente perceptible. C'est exactement le pattern utilisé par les grandes applications comme Twitter, Instagram ou LinkedIn.</p>

<hr class="nml__editor__content__hr">

<h3 class="nml__editor__content__heading">Bonnes pratiques et pièges à éviter</h3>

<p>Voici quelques recommandations issues de notre expérience chez Drylead :</p>

<ul class="nml__editor__content__bullet__list"><li class="nml__editor__content__listItem"><p><strong>Définissez un PAGE_SIZE adapté</strong> : trop petit (5) génère trop de requêtes, trop grand (100) ralentit le rendu. Visez 10 à 25 selon la complexité de vos items.</p></li><li class="nml__editor__content__listItem"><p><strong>Ajoutez un skeleton loader</strong> : plutôt qu'un simple texte "Chargement...", affichez des placeholders qui reproduisent la structure des éléments à venir.</p></li><li class="nml__editor__content__listItem"><p><strong>Gérez la navigation retour</strong> : quand l'utilisateur quitte la page puis revient, SWR restaure les données depuis le cache. Vérifiez que le scroll position est aussi restauré.</p></li><li class="nml__editor__content__listItem"><p><strong>Attention au re-render excessif</strong> : si votre liste est longue, envisagez la virtualisation (react-window ou react-virtuoso) pour ne rendre que les éléments visibles.</p></li><li class="nml__editor__content__listItem"><p><strong>Côté API</strong> : retournez toujours un indicateur de fin (tableau vide ou champ <code>hasMore</code>) pour que le frontend sache quand arrêter de paginer.</p></li></ul>

<hr class="nml__editor__content__hr">

<h3 class="nml__editor__content__heading">Cas d'usage idéaux</h3>

<p>Ce système de pagination SWR est particulièrement adapté pour :</p>

<ul class="nml__editor__content__bullet__list"><li class="nml__editor__content__listItem"><p>Les <strong>interfaces d'administration</strong> affichant des listes de clients, commandes ou tickets</p></li><li class="nml__editor__content__listItem"><p>Les <strong>applications mobiles</strong> en React Native où le scroll infini est le pattern dominant</p></li><li class="nml__editor__content__listItem"><p>Les <strong>e-commerces</strong> affichant des catalogues produits avec filtres dynamiques</p></li><li class="nml__editor__content__listItem"><p>Les <strong>back-offices</strong> sur mesure avec des tableaux de données complexes</p></li><li class="nml__editor__content__listItem"><p>Les <strong>feeds de contenu</strong> (actualités, articles, notifications) où le chargement progressif est essentiel</p></li></ul>

<hr class="nml__editor__content__hr">

<h3 class="nml__editor__content__heading">Besoin d'aller plus loin ? On le fait pour vous.</h3>

<p>Chez <strong>Drylead</strong>, nous accompagnons les entreprises ambitieuses dans la création d'interfaces modernes, rapides et scalables avec React, Next.js et SWR. Nous utilisons quotidiennement ces technologies dans nos projets clients, et nous maîtrisons les subtilités qui font la différence entre une implémentation basique et une expérience utilisateur professionnelle.</p>

<p><strong>Vous avez un besoin spécifique ?</strong> Que ce soit pour auditer votre front-end existant, migrer vers Next.js, ou développer une application sur mesure, notre équipe technique est prête à vous accompagner.</p>

<p><strong>Contactez-nous</strong> pour bénéficier d'un accompagnement technique sur-mesure : développement, audit de performance, migration vers Next.js... <strong>On s'occupe de tout.</strong></p>

<p>Parlons-en : <a target="_blank" rel="noopener noreferrer nofollow" class="nml__editor__content__link" href="https://drylead.agency/contact">contact</a></p>
<p>Plus d'infos sur : <a target="_blank" rel="noopener noreferrer nofollow" class="nml__editor__content__link" href="http://drylead.agency">drylead.agency</a></p>

<p><strong>Vous développez une application React nécessitant un chargement progressif de données (infinite scroll ou pagination) ?</strong> Vous souhaitez éviter les surcharges inutiles tout en améliorant l’expérience utilisateur ? <strong>Découvrez comment tirer parti de SWR et useSWRInfinite pour une gestion des données fluide, performante… et simple à mettre en œuvre !</strong></p>

Utiliser la puissance de SWR pour la pagination ou le scroll infini

Agence Drylead

Informations

📱 Vous avez un projet d'application mobile ?

Faites-le passer à la vitesse supérieure ! 🚀

Articles similaires