Utilisez ces techniques pour créer des interfaces utilisables pour parcourir les ensembles de données.

La plupart des applications que vous développerez géreront les données; à mesure que les programmes continuent de s’étendre, leur quantité peut devenir de plus en plus importante. Lorsque les applications ne parviennent pas à gérer efficacement de grandes quantités de données, leurs performances sont médiocres.

La pagination et le défilement infini sont deux techniques populaires que vous pouvez utiliser pour optimiser les performances des applications. Ils peuvent vous aider à gérer le rendu des données plus efficacement et à améliorer l’expérience utilisateur globale.

Pagination et défilement infini à l'aide de la requête TanStack

Requête TanStack—une adaptation de React Query—est une bibliothèque robuste de gestion d'état pour les applications JavaScript. Il offre une solution efficace pour gérer l'état des applications, entre autres fonctionnalités, y compris les tâches liées aux données telles que la mise en cache.

instagram viewer

La pagination consiste à diviser un grand ensemble de données en pages plus petites, permettant aux utilisateurs de parcourir le contenu en morceaux gérables à l'aide des boutons de navigation. En revanche, le défilement infini offre une expérience de navigation plus dynamique. Au fur et à mesure que l'utilisateur fait défiler, de nouvelles données se chargent et s'affichent automatiquement, éliminant ainsi le besoin d'une navigation explicite.

La pagination et le défilement infini visent à gérer et présenter efficacement de grandes quantités de données. Le choix entre les deux dépend des besoins en données de l'application.

Vous pouvez trouver le code de ce projet dans ce GitHub dépôt.

Configuration d'un projet Next.js

Pour commencer, créez un projet Next.js. Installez le dernière version de Next.js 13 qui utilise le répertoire App.

npx create-next-app@latest next-project --app

Ensuite, installez le package TanStack dans votre projet en utilisant npm, le gestionnaire de packages Node.

npm i @tanstack/react-query

Intégrer la requête TanStack dans l'application Next.js

Pour intégrer TanStack Query dans votre projet Next.js, vous devez créer et initialiser une nouvelle instance de TanStack Query à la racine de l'application: la mise en page.js déposer. Pour ce faire, importez RequêteClient et QueryClientProvider à partir de la requête TanStack. Ensuite, enveloppez l'accessoire pour enfants avec QueryClientProvider comme suit:

"use client"
import React from'react'
import { QueryClient, QueryClientProvider } from'@tanstack/react-query';
const metadata = {
 title: 'Create Next App',
 description: 'Generated by create next app',
};


exportdefaultfunctionRootLayout({ children }) {
const queryClient = new QueryClient();


return (
"en">



 {children}
 </QueryClientProvider>
 </body>
 </html>
 );
}
export { metadata };

Cette configuration garantit que TanStack Query a un accès complet à l'état de l'application.

Implémenter la pagination à l'aide du hook useQuery

Le utiliserRequête hook rationalise la récupération et la gestion des données. En fournissant des paramètres de pagination, tels que les numéros de page, vous pouvez facilement récupérer des sous-ensembles de données spécifiques.

De plus, le hook fournit diverses options et configurations pour personnaliser votre fonctionnalité de récupération de données, y compris la définition des options de cache, ainsi que la gestion efficace des états de chargement. Grâce à ces fonctionnalités, vous pouvez créer sans effort une expérience de pagination transparente.

Maintenant, pour implémenter la pagination dans l'application Next.js, créez un Pagination/page.js fichier dans le src/application annuaire. Dans ce fichier, effectuez les importations suivantes :

"use client"
import React, { useState } from'react';
import { useQuery} from'@tanstack/react-query';
import'./page.styles.css';

Ensuite, définissez un composant fonctionnel React. Dans ce composant, vous devez définir une fonction qui récupérera les données d'une API externe. Dans ce cas, utilisez le API JSONPlaceholder pour récupérer un ensemble de messages.

exportdefaultfunctionPagination() {
const [page, setPage] = useState(1);
const fetchPosts = async () => {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts?
 _page=${page}&_limit=10`);


if (!response.ok) {
thrownewError('Failed to fetch posts');
 }


const data = await response.json();
return data;
 } catch (error) {
console.error(error);
throw error;
 }
 };
// add the following code here
}

Maintenant, définissez le hook useQuery et spécifiez les paramètres suivants en tant qu'objets :

const { isLoading, isError, error, data } = useQuery({
 keepPreviousData: true,
 queryKey: ['posts', page],
 queryFn: fetchPosts,
 });

Le conserver les données précédentes La valeur est vrai, qui garantit que, lors de la récupération de nouvelles données, l'application préserve les données précédentes. Le clé de requête Le paramètre est un tableau contenant la clé de la requête, dans ce cas, le point de terminaison et la page actuelle pour laquelle vous souhaitez récupérer les données. Enfin, le requêteFn paramètre, récupérer les messages, déclenche l'appel de fonction pour récupérer les données.

Comme mentionné précédemment, le hook fournit plusieurs états que vous pouvez décompresser, de la même manière que vous le feriez pour déstructurer des tableaux et des objets, et utilisez-les pour améliorer l'expérience utilisateur (en rendant les interfaces utilisateur appropriées) pendant le processus de récupération de données. Ces états comprennent est en cours de chargement, jeerreur, et plus.

Pour ce faire, incluez le code suivant pour afficher différents écrans de message en fonction de l'état actuel du processus en cours :

if (isLoading) {
return (<h2>Loading...h2>);
 }
if (isError) {
return (<h2className="error-message">{error.message}h2>); 
 }

Enfin, incluez le code des éléments JSX qui s'afficheront sur la page du navigateur. Ce code remplit également deux autres fonctions :

  • Une fois que l'application récupère les publications de l'API, elles seront stockées dans le données variable fournie par le hook useQuery. Cette variable permet de gérer l'état de l'application. Vous pouvez ensuite mapper la liste des publications stockées dans cette variable et les afficher sur le navigateur.
  • Pour ajouter deux boutons de navigation, Précédent et Suivant, pour permettre aux utilisateurs d'interroger et d'afficher des données paginées supplémentaires en conséquence. 
return (


"header">Next.js Pagination</h2> 
 {data && (
"card">
    "post-list"> 
     {data.map((post) => (
  • "post-item">{post.title}</li> 
     ))}
     </ul>
     </div>
     )}
    'btn-container'>
     onClick={() => setPage(prevState =>Math.max(prevState - 1, 0))}
     disabled={page 1}
     className="prev-button"
     >Prev Page</button>

    

    • 







 onClick={() => setPage(prevState => prevState + 1)}
 className="next-button"
 >Next Page</button>
 </div>
 </div>
 );

Enfin, démarrez le serveur de développement.

npm run dev

Ensuite, rendez-vous à http://localhost: 3000/Pagination dans un navigateur.

Puisque vous avez inclus le Pagination dossier dans le application répertoire, Next.js le traite comme une route, vous permettant d'accéder à la page à cette URL.

Le défilement infini offre une expérience de navigation fluide. Un bon exemple est YouTube, qui récupère automatiquement les nouvelles vidéos et les affiche au fur et à mesure que vous faites défiler vers le bas.

Le utiliserInfiniteQuery hook vous permet d'implémenter un défilement infini en récupérant les données d'un serveur dans des pages et en récupérant et en rendant automatiquement la page de données suivante lorsque l'utilisateur fait défiler vers le bas.

Pour implémenter le défilement infini, ajoutez un InfiniteScroll/page.js fichier dans le src/application annuaire. Ensuite, effectuez les importations suivantes :

"use client"
import React, { useRef, useEffect, useState } from'react';
import { useInfiniteQuery } from'@tanstack/react-query';
import'./page.styles.css';

Ensuite, créez un composant fonctionnel React. Dans ce composant, similaire à l'implémentation de la pagination, créez une fonction qui récupérera les données des publications.

exportdefaultfunctionInfiniteScroll() {
const listRef = useRef(null);
const [isLoadingMore, setIsLoadingMore] = useState(false);
const fetchPosts = async ({ pageParam = 1 }) => {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts?
 _page=${pageParam}&_limit=5`);


if (!response.ok) {
thrownewError('Failed to fetch posts');
 }


const data = await response.json();
awaitnewPromise((resolve) => setTimeout(resolve, 2000));
return data;
 } catch (error) {
console.error(error);
throw error;
 }
 };
// add the following code here
}

Contrairement à l'implémentation de la pagination, ce code introduit un délai de deux secondes lors de la récupération des données vers permettre à un utilisateur d'explorer les données actuelles pendant qu'il fait défiler pour déclencher une récupération d'un nouvel ensemble de données.

Maintenant, définissez le hook useInfiniteQuery. Lors du montage initial du composant, le hook récupère la première page de données du serveur. Au fur et à mesure que l'utilisateur fait défiler vers le bas, le hook récupère automatiquement la page de données suivante et la restitue dans le composant.

const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
 queryKey: ['posts'],
 queryFn: fetchPosts,
 getNextPageParam: (lastPage, allPages) => {
if (lastPage.length < 5) {
returnundefined;
 }
return allPages.length + 1;
 },
 });
const posts = data? data.pages.flatMap((page) => page): [];

Le des postes La variable combine toutes les publications de différentes pages en un seul tableau, ce qui donne une version aplatie du données variable. Cela vous permet de mapper et de restituer facilement les publications individuelles.

Pour suivre les défilements de l'utilisateur et charger plus de données lorsque l'utilisateur est proche du bas de la liste, vous pouvez définir une fonction qui utilise l'API Intersection Observer pour détecter quand des éléments se croisent avec le fenêtre d'affichage.

const handleIntersection = (entries) => {
if (entries[0].isIntersecting && hasNextPage && !isFetching && !isLoadingMore) {
 setIsLoadingMore(true);
 fetchNextPage();
 }
 };
 useEffect(() => {
const observer = new IntersectionObserver(handleIntersection, { threshold: 0.1 });


if (listRef.current) {
 observer.observe(listRef.current);
 }


return() => {
if (listRef.current) {
 observer.unobserve(listRef.current);
 }
 };
 }, [listRef, handleIntersection]);
 useEffect(() => {
if (!isFetching) {
 setIsLoadingMore(false);
 }
 }, [isFetching]);

Enfin, incluez les éléments JSX pour les publications qui s'affichent dans le navigateur.

return (


"header">Infinite Scroll</h2>
    "post-list">
     {posts.map((post) => (
  • "post-item">
     {post.title}
     </li>
     ))}
     </ul>
    "loading-indicator">
     {isFetching? 'Fetching...': isLoadingMore? 'Loading more...': null}
     </div>
     </div>
     );
    

    •

Une fois que vous avez effectué toutes les modifications, visitez http://localhost: 3000/Défilement Infini pour les voir en action.

Requête TanStack: plus qu'une simple récupération de données

La pagination et le défilement infini sont de bons exemples qui mettent en évidence les capacités de TanStack Query. En termes simples, il s'agit d'une bibliothèque complète de gestion de données.

Grâce à son ensemble complet de fonctionnalités, vous pouvez rationaliser les processus de gestion des données de votre application, y compris une gestion efficace de l'état. Parallèlement à d'autres tâches liées aux données, vous pouvez améliorer les performances globales de vos applications Web, ainsi que l'expérience utilisateur.