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

✅ Pourquoi utiliser SWR pour la pagination ?

SWR (stale-while-revalidate) est une bibliothèque de gestion des données ultra performante développée par Vercel, idéale pour gérer le caching, le rechargement automatique et surtout la pagination dynamique.

Avec useSWRInfinite, vous pouvez charger les données au fur et à mesure (scroll infini ou bouton “charger plus”), sans impacter la fluidité de votre interface.

⚙️ Étape 1 : Installer SWR dans votre projet React

Si ce n’est pas encore fait :

npm install swr
# ou
yarn add swr

📦 Étape 2 : Importer les dépendances

import useSWRInfinite from 'swr/infinite';
import axios from 'axios';

🔁 Étape 3 : Créer une fonction de récupération des données

Voici un exemple simple basé sur Axios :

const fetcher = (url) => axios.get(url).then((res) => res.data);
const fetchPage = (pageIndex) => fetcher(`/api/data?page=${pageIndex}`);

🧠 Étape 4 : Utiliser useSWRInfinite

const PAGE_SIZE = 10;
const getKey = (pageIndex, previousPageData) => {
  if (previousPageData && !previousPageData.length) return null;
  return /api/data?page=${pageIndex + 1};
};
const { data, error, size, setSize } = useSWRInfinite(getKey, fetchPage, {
  initialSize: 1,
});
const isLoadingInitialData = !data && !error;
const isLoadingMore =
  isLoadingInitialData || (size > 0 && data && typeof data[size - 1] === 'undefined');

🖼️ Étape 5 : Affichage dans le composant

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>
    ))}
    {isLoadingMore && <div>Chargement de plus de données...</div>}
    <button onClick={() => setSize(size + 1)} disabled={isLoadingMore}>
      Charger plus
    </button>
  </div>
);

🎯 En résumé

Vous venez de mettre en place une pagination ou un scroll infini performant grâce à SWR. Ce système est idéal pour :

• Les interfaces administrateurs

• Les applications mobiles en React Native

• Les e-commerces affichant des listes de produits

• Les back-offices custom

💡 Besoin d’aller plus loin ? On le fait pour vous.

Chez Drylead, nous accompagnons les entreprises ambitieuses dans la création d’interfaces modernes, rapides et scalables avec React, Next.js et SWR.

👉 Vous avez un besoin spécifique ?

👉 Vous souhaitez auditer ou moderniser votre front-end ?

Contactez-nous pour bénéficier d’un accompagnement technique sur-mesure : développement, audit de performance, migration vers Next.js… On s’occupe de tout.

🔧 Un projet React à fiabiliser ou optimiser ?

Nous avons les outils, l’expérience et la méthode pour livrer vite, bien, et durablement.

📩 Parlons-en : contact

🌐 Plus d’infos sur : drylead.agency