Comment implémenter une pagination et un moteur de recherche optimisés (React)

Simon Zeru Image

Simon Zeru

16 janvier 2025 (il y a 5 mois)

Dans le développement d'applications front-end, la pagination et la mise en place d'un moteur de recherche performant sont des fonctionnalités couramment demandées.

Image d'un moteur de recherche

Dans cet article, je vais te guider à travers la mise en place d'un moteur de recherche avec pagination en React, en utilisant Next.js.

Les fondamentaux : query params, hooks, et logique de pagination

1. Gestion des Query Params dans Next.js

Les query params sont des paramètres ajoutés à l'URL pour transmettre des informations comme la page actuelle ou le nombre d'items par page. Cela permet de conserver l'état de la pagination et des filtres entre les navigations.

Dans Next.js, la fonction useSearchParams permet de récupérer et manipuler les query params facilement.

Exemple :

const searchParams = useSearchParams();
 
const page = Number(searchParams.get('page')) || 1;
const itemsPerPage = Number(searchParams.get('items-per-page')) || 5;

Ici, on extrait les paramètres page et items-per-page de l'URL. Si aucun paramètre n'est présent, on utilise des valeurs par défaut.

2. Utilisation des hooks useState et useMemo

Les hooks useState et useMemo sont essentiels pour la gestion des états et l'optimisation des performances dans une application React.

Exemple de filtre avec useMemo :

const [query, setQuery] = useState('');
 
const filteredArticles = useMemo(() => {
  if (!query) return posts;
 
  return posts.filter(item => 
    item.metadata.title.toLowerCase().includes(query.toLowerCase()) ||
    item.metadata.summary.toLowerCase().includes(query.toLowerCase())
  );
}, [posts, query]);

Dans cet exemple, useMemo optimise la logique de filtrage des articles. Si la query change, l'état de la recherche se met à jour et les articles sont filtrés en fonction du titre et du résumé.

3. Logique de Pagination

La pagination permet de diviser une grande quantité de données en plusieurs pages pour faciliter la navigation. Ici, nous calculons quels articles afficher en fonction de la page courante et du nombre d'items par page.

Calcul des articles à afficher :

const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
 
const articlesToDisplay = filteredArticles.slice(start, end);

On détermine l'index de début (start) et de fin (end) des articles à afficher en fonction de la page et des items par page.

4. Mise en place des contrôles de pagination

Les boutons "Suivant" et "Précédent" permettent de naviguer entre les pages. Nous utilisons le hook useRouter pour gérer la navigation avec Next.js.

Exemple de contrôles de pagination :

const PaginationControls = ({ page, hasNextPage, hasPrevPage, locale }) => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const itemsPerPage = searchParams.get('items-per-page') ?? '5';
 
  return (
    <div className='flex justify-between'>
      <button
        disabled={!hasPrevPage}
        onClick={() => router.push(`/${locale}/blog?page=${page - 1}&items-per-page=${itemsPerPage}`)}
      >
        Précédent
      </button>
 
      <button
        disabled={!hasNextPage}
        onClick={() => router.push(`/${locale}/blog?page=${page + 1}&items-per-page=${itemsPerPage}`)}
      >
        Suivant
      </button>
    </div>
  );
};

Les boutons contrôlent la navigation entre les pages tout en conservant l'état de la pagination dans les query params.

Conclusion

En combinant les hooks React (useState, useMemo) et les query params de Next.js, tu peux implémenter une pagination performante et un moteur de recherche efficace. La gestion des données paginées permet d'améliorer l'expérience utilisateur, surtout avec de grands volumes de données. Le concept fondamental est de toujours optimiser la performance et la lisibilité du code, surtout lorsque les utilisateurs interagissent avec un moteur de recherche en temps réel.

LinkedIn