Cum să implementați derularea infinită și paginarea cu Next.js și TanStack Query

Majoritatea aplicațiilor pe care le veți dezvolta vor gestiona datele; pe măsură ce programele continuă să se extindă, poate exista o cantitate din ce în ce mai mare. Atunci când aplicațiile nu reușesc să gestioneze cantități mari de date în mod eficient, acestea funcționează slab.

Paginarea și derularea infinită sunt două tehnici populare pe care le puteți folosi pentru a optimiza performanța aplicației. Ele vă pot ajuta să gestionați redarea datelor mai eficient și să îmbunătățiți experiența generală a utilizatorului.

Paginare și derulare infinită folosind TanStack Query

Interogare TanStack— o adaptare a React Query — este o bibliotecă robustă de gestionare a stării pentru aplicațiile JavaScript. Oferă o soluție eficientă pentru gestionarea stării aplicației, printre alte funcționalități, inclusiv sarcini legate de date, cum ar fi stocarea în cache.

Paginarea implică împărțirea unui set mare de date în pagini mai mici, permițând utilizatorilor să navigheze prin conținut în bucăți gestionabile folosind butoanele de navigare. În schimb, defilarea infinită oferă o experiență de navigare mai dinamică. Pe măsură ce utilizatorul derulează, datele noi se încarcă și se afișează automat, eliminând nevoia de navigare explicită.

Paginarea și derularea infinită au scopul de a gestiona și prezenta eficient cantități mari de date. Alegerea dintre cele două depinde de cerințele de date ale aplicației.

Configurarea unui proiect Next.js

Pentru a începe, creați un proiect Next.js. Instalați cea mai recentă versiune a Next.js 13 care utilizează directorul App.

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

Apoi, instalați pachetul TanStack în proiectul dvs. folosind npm, managerul de pachete Node.

npm i @tanstack/react-query

Integrați TanStack Query în aplicația Next.js

Pentru a integra TanStack Query în proiectul dvs. Next.js, trebuie să creați și să inițializați o nouă instanță a TanStack Query în rădăcina aplicației - layout.js fişier. Pentru a face asta, importați QueryClient și QueryClientProvider din TanStack Query. Apoi, înfășurați recuzita copiilor cu QueryClientProvider după cum urmează:

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

Această configurare asigură că TanStack Query are acces complet la starea aplicației.

Implementați paginarea utilizând cârligul useQuery

The useQuery hook simplifică preluarea și gestionarea datelor. Prin furnizarea de parametri de paginare, cum ar fi numerele de pagină, puteți prelua cu ușurință anumite subseturi de date.

În plus, cârligul oferă diverse opțiuni și configurații pentru a vă personaliza funcționalitatea de preluare a datelor, inclusiv setarea opțiunilor de cache, precum și gestionarea eficientă a stărilor de încărcare. Cu aceste funcții, puteți crea fără efort o experiență de paginare perfectă.

Acum, pentru a implementa paginarea în aplicația Next.js, creați un Pagination/page.js dosar în src/app director. În interiorul acestui fișier, efectuați următoarele importuri:

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

Apoi, definiți o componentă funcțională React. În cadrul acestei componente, trebuie să definiți o funcție care va prelua date de la un API extern. În acest caz, utilizați API-ul JSONPlaceholder pentru a prelua un set de postări.

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
}

Acum, definiți cârligul useQuery și specificați următorii parametri ca obiecte:

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

The keepPreviousData valoarea este Adevărat, care asigură că, în timp ce preia date noi, aplicația păstrează datele anterioare. The queryKey parametrul este o matrice care conține cheia pentru interogare, în acest caz, punctul final și pagina curentă pentru care doriți să obțineți date. În cele din urmă, interogareFn parametru, fetchPosts, declanșează apelul de funcție pentru a prelua date.

După cum am menționat mai devreme, cârligul oferă mai multe stări pe care le puteți despacheta, similar cu cum ați face-o destructurare matrice și obiecte, și să le utilizați pentru a îmbunătăți experiența utilizatorului (prezentând interfețe de utilizare adecvate) în timpul procesului de preluare a datelor. Aceste state includ se incarca, ieroare, și altele.

Pentru a face acest lucru, includeți următorul cod pentru a reda diferite ecrane de mesaje pe baza stării curente a procesului în curs:

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

În cele din urmă, includeți codul pentru elementele JSX care se vor reda pe pagina browserului. Acest cod servește și alte două funcții:

• Odată ce aplicația preia postările din API, acestea vor fi stocate în date variabilă furnizată de cârligul useQuery. Această variabilă ajută la gestionarea stării aplicației. Puteți apoi să mapați lista de postări stocate în această variabilă și să le redați în browser.
• Pentru a adăuga două butoane de navigare, Anterior și Următorul, pentru a permite utilizatorilor să interogheze și să afișeze date paginate suplimentare în consecință.

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

În cele din urmă, porniți serverul de dezvoltare.

npm run dev

Apoi, du-te la http://localhost: 3000/Paginare într-un browser.

Din moment ce ai inclus Paginare folderul în aplicația director, Next.js îl tratează ca pe o rută, permițându-vă să accesați pagina la adresa URL respectivă.

Derularea infinită oferă o experiență de navigare perfectă. Un bun exemplu este YouTube, care preia automat videoclipuri noi și le afișează pe măsură ce derulați în jos.

The utilizațiInfiniteQuery hook vă permite să implementați derularea infinită prin preluarea datelor de la un server în pagini și preluarea și redarea automată a paginii următoare de date pe măsură ce utilizatorul derulează în jos.

Pentru a implementa derularea infinită, adăugați un InfiniteScroll/page.js dosar în src/app director. Apoi, efectuați următoarele importuri:

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

Apoi, creați o componentă funcțională React. În interiorul acestei componente, similar implementării de paginare, creați o funcție care va prelua datele postărilor.

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
}

Spre deosebire de implementarea paginației, acest cod introduce o întârziere de două secunde la preluarea datelor permite unui utilizator să exploreze datele curente în timp ce derulează pentru a declanșa o recăpătare a unui nou set de date.

Acum, definiți cârligul useInfiniteQuery. Când componenta se montează inițial, cârligul va prelua prima pagină de date de pe server. Pe măsură ce utilizatorul derulează în jos, cârligul va prelua automat următoarea pagină de date și o va reda în componentă.

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

The postări variabilă combină toate postările din pagini diferite într-o singură matrice, rezultând o versiune aplatizată a date variabil. Acest lucru vă permite să mapați cu ușurință și să randați postările individuale.

Pentru a urmări derulările utilizatorilor și a încărca mai multe date atunci când utilizatorul este aproape de partea de jos a listei, puteți defini o funcție care utilizează API-ul Intersection Observer pentru a detecta când elementele se intersectează cu fereastra de vizualizare.

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

În cele din urmă, includeți elementele JSX pentru postările care se redau în browser.

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

După ce ați făcut toate modificările, vizitați http://localhost: 3000/InfiniteScroll să-i văd în acțiune.

Interogare TanStack: Mai mult decât preluarea datelor

Paginarea și derularea infinită sunt exemple bune care evidențiază capabilitățile TanStack Query. Mai simplu spus, este o bibliotecă completă de gestionare a datelor.

Cu setul său extins de funcții, puteți eficientiza procesele de gestionare a datelor din aplicația dvs., inclusiv gestionarea eficientă a stării. Pe lângă alte sarcini legate de date, puteți îmbunătăți performanța generală a aplicațiilor dvs. web, precum și experiența utilizatorului.