Cómo implementar desplazamiento y paginación infinitos con Next.js y TanStack Query

La mayoría de las aplicaciones que desarrollarás gestionarán datos; A medida que los programas continúan escalando, puede haber una cantidad cada vez mayor. Cuando las aplicaciones no logran administrar grandes cantidades de datos de manera efectiva, su rendimiento es deficiente.

La paginación y el desplazamiento infinito son dos técnicas populares que puedes utilizar para optimizar el rendimiento de la aplicación. Pueden ayudarlo a manejar la representación de datos de manera más eficiente y mejorar la experiencia general del usuario.

Paginación y desplazamiento infinito mediante TanStack Query

Consulta TanStack—una adaptación de React Query—es una sólida biblioteca de administración de estado para aplicaciones JavaScript. Ofrece una solución eficiente para gestionar el estado de las aplicaciones, entre otras funcionalidades, incluidas tareas relacionadas con datos, como el almacenamiento en caché.

La paginación implica dividir un conjunto de datos grande en páginas más pequeñas, lo que permite a los usuarios navegar por el contenido en fragmentos manejables mediante botones de navegación. Por el contrario, el desplazamiento infinito proporciona una experiencia de navegación más dinámica. A medida que el usuario se desplaza, se cargan y muestran nuevos datos automáticamente, eliminando la necesidad de una navegación explícita.

La paginación y el desplazamiento infinito tienen como objetivo gestionar y presentar de manera eficiente grandes cantidades de datos. La elección entre los dos depende de los requisitos de datos de la aplicación.

Configurar un proyecto Next.js

Para comenzar, cree un proyecto Next.js. Instala el última versión de Next.js 13 que utiliza el directorio de aplicaciones.

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

A continuación, instale el paquete TanStack en su proyecto usando npm, el administrador de paquetes de Node.

npm i @tanstack/react-query

Integre TanStack Query en la aplicación Next.js

Para integrar TanStack Query en su proyecto Next.js, debe crear e inicializar una nueva instancia de TanStack Query en la raíz de la aplicación: la diseño.js archivo. Para hacer eso, importe Cliente de consulta y ProveedorClienteConsulta de la consulta TanStack. Luego, envuelve el accesorio infantil con ProveedorClienteConsulta como sigue:

"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 };

Esta configuración garantiza que TanStack Query tenga acceso completo al estado de la aplicación.

Implementar paginación usando el gancho useQuery

El utilizarConsulta Hook agiliza la obtención y gestión de datos. Al proporcionar parámetros de paginación, como números de página, puede recuperar fácilmente subconjuntos de datos específicos.

Además, el enlace proporciona varias opciones y configuraciones para personalizar la funcionalidad de obtención de datos, incluida la configuración de opciones de caché y el manejo eficiente de los estados de carga. Con estas funciones, puede crear sin esfuerzo una experiencia de paginación perfecta.

Ahora, para implementar la paginación en la aplicación Next.js, cree un Paginación/page.js archivo en el origen/aplicación directorio. Dentro de este archivo, realice las siguientes importaciones:

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

Luego, defina un componente funcional de React. Dentro de este componente, debe definir una función que recuperará datos de una API externa. En este caso, utilice el API de marcador de posición JSON para buscar un conjunto de publicaciones.

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
}

Ahora, defina el gancho useQuery y especifique los siguientes parámetros como objetos:

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

El mantener datos anteriores el valor es verdadero, lo que garantiza que, mientras recupera datos nuevos, la aplicación conserva los datos anteriores. El consultaClave El parámetro es una matriz que contiene la clave de la consulta, en este caso, el punto final y la página actual para la que desea obtener datos. Por último, el consultaFn parámetro, buscar publicaciones, activa la llamada a la función para recuperar datos.

Como se mencionó anteriormente, el gancho proporciona varios estados que puede descomprimir, de manera similar a como lo haría desestructurar matrices y objetos, y utilizarlos para mejorar la experiencia del usuario (presentando UI apropiadas) durante el proceso de obtención de datos. Estos estados incluyen esta cargando, ierror, y más.

Para hacerlo, incluya el siguiente código para representar diferentes pantallas de mensajes según el estado actual del proceso en curso:

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

Finalmente, incluya el código para los elementos JSX que se mostrarán en la página del navegador. Este código también cumple otras dos funciones:

• Una vez que la aplicación recupera las publicaciones de la API, se almacenarán en el datos variable proporcionada por el gancho useQuery. Esta variable ayuda a gestionar el estado de la aplicación. Luego puede asignar la lista de publicaciones almacenadas en esta variable y representarlas en el navegador.
• Para agregar dos botones de navegación, Anterior y Próximo, para permitir a los usuarios consultar y mostrar datos paginados adicionales en consecuencia.

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>
 );

Por último, inicie el servidor de desarrollo.

npm run dev

Luego, dirígete a http://localhost: 3000/paginación en un navegador.

Ya que incluiste el Paginación carpeta en el aplicación directorio, Next.js lo trata como una ruta, lo que le permite acceder a la página en esa URL.

El desplazamiento infinito proporciona una experiencia de navegación perfecta. Un buen ejemplo es YouTube, que busca nuevos vídeos automáticamente y los muestra a medida que te desplazas hacia abajo.

El utilizarInfiniteQuery El gancho le permite implementar un desplazamiento infinito al obtener datos de un servidor en páginas y obtener y representar automáticamente la siguiente página de datos a medida que el usuario se desplaza hacia abajo.

Para implementar el desplazamiento infinito, agregue un Desplazamiento infinito/page.js archivo en el origen/aplicación directorio. Luego, realice las siguientes importaciones:

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

A continuación, cree un componente funcional de React. Dentro de este componente, similar a la implementación de paginación, cree una función que recuperará los datos de las publicaciones.

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
}

A diferencia de la implementación de paginación, este código introduce un retraso de dos segundos al recuperar datos para permitir al usuario explorar los datos actuales mientras se desplaza para activar una nueva recuperación de un nuevo conjunto de datos.

Ahora, defina el gancho useInfiniteQuery. Cuando el componente se monta inicialmente, el enlace recuperará la primera página de datos del servidor. A medida que el usuario se desplaza hacia abajo, el enlace buscará automáticamente la siguiente página de datos y la representará en el componente.

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): [];

El publicaciones La variable combina todas las publicaciones de diferentes páginas en una sola matriz, lo que da como resultado una versión aplanada de la datos variable. Esto le permite mapear y renderizar fácilmente las publicaciones individuales.

Para realizar un seguimiento de los desplazamientos del usuario y cargar más datos cuando el usuario está cerca del final de la lista, puede definir una función que utiliza la API de Intersection Observer para detectar cuándo los elementos se cruzan con el ventana gráfica.

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]);

Por último, incluya los elementos JSX para las publicaciones que se muestran en el navegador.

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>
 );

Una vez que hayas realizado todos los cambios, visita http://localhost: 3000/Desplazamiento Infinito para verlos en acción.

Consulta TanStack: más que solo obtener datos

La paginación y el desplazamiento infinito son buenos ejemplos que resaltan las capacidades de TanStack Query. En pocas palabras, es una biblioteca de gestión de datos completa.

Con su amplio conjunto de funciones, puede optimizar los procesos de administración de datos de su aplicación, incluido el manejo eficiente del estado. Además de otras tareas relacionadas con los datos, puede mejorar el rendimiento general de sus aplicaciones web, así como la experiencia del usuario.