Use essas técnicas para criar interfaces utilizáveis ​​para navegar em conjuntos de dados.

A maioria dos aplicativos que você desenvolverá gerenciará dados; à medida que os programas continuam a crescer, pode haver uma quantidade cada vez maior deles. Quando os aplicativos não conseguem gerenciar grandes quantidades de dados de maneira eficaz, eles apresentam desempenho insatisfatório.

Paginação e rolagem infinita são duas técnicas populares que você pode usar para otimizar o desempenho do aplicativo. Eles podem ajudá-lo a lidar com a renderização de dados com mais eficiência e aprimorar a experiência geral do usuário.

Paginação e rolagem infinita usando TanStack Query

Consulta TanStack—uma adaptação do React Query — é uma biblioteca robusta de gerenciamento de estado para aplicativos JavaScript. Oferece uma solução eficiente para gerenciar o estado da aplicação, entre outras funcionalidades, incluindo tarefas relacionadas a dados, como cache.

A paginação envolve a divisão de um grande conjunto de dados em páginas menores, permitindo que os usuários naveguem pelo conteúdo em partes gerenciáveis ​​usando botões de navegação. Por outro lado, a rolagem infinita proporciona uma experiência de navegação mais dinâmica. À medida que o usuário rola, novos dados são carregados e exibidos automaticamente, eliminando a necessidade de navegação explícita.

A paginação e a rolagem infinita visam gerenciar e apresentar com eficiência grandes quantidades de dados. A escolha entre os dois depende dos requisitos de dados do aplicativo.

Você pode encontrar o código deste projeto neste GitHub repositório.

Configurando um projeto Next.js

Para começar, crie um projeto Next.js. Instale o versão mais recente do Next.js 13 que usa o diretório App.

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

A seguir, instale o pacote TanStack em seu projeto usando npm, o gerenciador de pacotes do Node.

npm i @tanstack/react-query

Integre a consulta TanStack no aplicativo Next.js

Para integrar o TanStack Query em seu projeto Next.js, você precisa criar e inicializar uma nova instância do TanStack Query na raiz do aplicativo – o layout.js arquivo. Para fazer isso, importe ConsultarCliente e QueryClientProvider da consulta TanStack. Em seguida, embrulhe o adereço infantil com QueryClientProvider do seguinte modo:

"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 configuração garante que o TanStack Query tenha acesso completo ao estado do aplicativo.

Implementar paginação usando o gancho useQuery

O useQuery hook agiliza a busca e o gerenciamento de dados. Ao fornecer parâmetros de paginação, como números de página, você pode recuperar facilmente subconjuntos específicos de dados.

Além disso, o gancho fornece várias opções e configurações para personalizar sua funcionalidade de busca de dados, incluindo a configuração de opções de cache, bem como o tratamento eficiente dos estados de carregamento. Com esses recursos, você pode criar sem esforço uma experiência de paginação perfeita.

Agora, para implementar a paginação no aplicativo Next.js, crie um Paginação/page.js arquivo no fonte/aplicativo diretório. Dentro deste arquivo, faça as seguintes importações:

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

Em seguida, defina um componente funcional React. Dentro deste componente, você precisa definir uma função que irá buscar dados de uma API externa. Neste caso, use o API JSONPlaceholder para buscar um conjunto de postagens.

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
}

Agora, defina o gancho useQuery e especifique os seguintes parâmetros como objetos:

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

O manterDadosAnteriores o valor é verdadeiro, o que garante que, ao buscar novos dados, o aplicativo preserve os dados anteriores. O chave de consulta parâmetro é uma matriz que contém a chave da consulta, neste caso, o endpoint e a página atual para a qual você deseja buscar dados. Por último, o consultaFn parâmetro, buscarPostagens, aciona a chamada de função para buscar dados.

Como mencionado anteriormente, o gancho fornece vários estados que você pode descompactar, semelhante a como você faria desestruturar matrizes e objetos, e utilizá-los para melhorar a experiência do usuário (renderizando UIs apropriadas) durante o processo de busca de dados. Esses estados incluem está carregando, euerro, e mais.

Para fazer isso, inclua o seguinte código para renderizar diferentes telas de mensagens com base no estado atual do processo em andamento:

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

Por fim, inclua o código dos elementos JSX que serão renderizados na página do navegador. Este código também serve duas outras funções:

  • Assim que o aplicativo buscar as postagens da API, elas serão armazenadas no dados variável fornecida pelo gancho useQuery. Esta variável ajuda a gerenciar o estado do aplicativo. Você pode então mapear a lista de postagens armazenadas nesta variável e renderizá-las no navegador.
  • Para adicionar dois botões de navegação, Anterior e Próximo, para permitir que os usuários consultem e exibam dados paginados adicionais adequadamente. 
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 o servidor de desenvolvimento.

npm run dev

Então, vá para http://localhost: 3000/Paginação em um navegador.

Já que você incluiu o Paginação pasta no aplicativo diretório, Next.js o trata como uma rota, permitindo que você acesse a página naquele URL.

A rolagem infinita oferece uma experiência de navegação perfeita. Um bom exemplo é o YouTube, que busca novos vídeos automaticamente e os exibe conforme você rola para baixo.

O useInfiniteQuery hook permite que você implemente a rolagem infinita buscando dados de um servidor em páginas e buscando e renderizando automaticamente a próxima página de dados conforme o usuário rola para baixo.

Para implementar a rolagem infinita, adicione um InfiniteScroll/page.js arquivo no fonte/aplicativo diretório. Em seguida, faça as seguintes importações:

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

A seguir, crie um componente funcional React. Dentro deste componente, semelhante à implementação da paginação, crie uma função que irá buscar os dados dos posts.

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
}

Ao contrário da implementação de paginação, este código introduz um atraso de dois segundos ao buscar dados para permitir que um usuário explore os dados atuais enquanto rola para acionar uma nova busca de um novo conjunto de dados.

Agora, defina o gancho useInfiniteQuery. Quando o componente é montado inicialmente, o gancho buscará a primeira página de dados do servidor. À medida que o usuário rola para baixo, o gancho busca automaticamente a próxima página de dados e a renderiza no 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): [];

O Postagens variável combina todas as postagens de páginas diferentes em um único array, resultando em uma versão nivelada do dados variável. Isso permite mapear e renderizar facilmente as postagens individuais.

Para rastrear a rolagem do usuário e carregar mais dados quando o usuário estiver próximo ao final da lista, você pode definir uma função que utiliza a API Intersection Observer para detectar quando os elementos se cruzam com o janela de exibição.

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, inclua os elementos JSX para as postagens renderizadas no 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>
     );
    

    •

Depois de fazer todas as alterações, visite http://localhost: 3000/Rolagem Infinita para vê-los em ação.

Consulta TanStack: mais do que apenas busca de dados

Paginação e rolagem infinita são bons exemplos que destacam os recursos do TanStack Query. Simplificando, é uma biblioteca completa de gerenciamento de dados.

Com seu amplo conjunto de recursos, você pode agilizar os processos de gerenciamento de dados do seu aplicativo, incluindo o tratamento eficiente de estado. Juntamente com outras tarefas relacionadas a dados, você pode melhorar o desempenho geral de suas aplicações web, bem como a experiência do usuário.