Använd dessa tekniker för att skapa användbara gränssnitt för att navigera i datamängder.

De flesta appar du kommer att utveckla kommer att hantera data; allt eftersom programmen fortsätter att skala kan det bli en allt större mängd av det. När applikationer misslyckas med att hantera stora datamängder effektivt presterar de dåligt.

Paginering och oändlig rullning är två populära tekniker som du kan använda för att optimera appens prestanda. De kan hjälpa dig att hantera datarendering mer effektivt och förbättra den övergripande användarupplevelsen.

Paginering och oändlig rullning med TanStack Query

TanStack-fråga—en anpassning av React Query — är ett robust tillståndshanteringsbibliotek för JavaScript-applikationer. Den erbjuder en effektiv lösning för att hantera applikationstillstånd, bland andra funktioner, inklusive datarelaterade uppgifter som cachning.

Paginering innebär att en stor datamängd delas upp i mindre sidor, så att användare kan navigera i innehållet i hanterbara delar med hjälp av navigeringsknappar. Däremot ger oändlig rullning en mer dynamisk surfupplevelse. När användaren rullar, laddas och visas ny data automatiskt, vilket eliminerar behovet av explicit navigering.

instagram viewer

Paginering och oändlig rullning syftar till att effektivt hantera och presentera stora mängder data. Valet mellan de två beror på applikationens datakrav.

Du kan hitta detta projekts kod i denna GitHub förvaret.

Konfigurera ett Next.js-projekt

För att komma igång, skapa ett Next.js-projekt. Installera senaste versionen av Next.js 13 som använder appkatalogen.

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

Installera sedan TanStack-paketet i ditt projekt med hjälp av npm, Node-pakethanteraren.

npm i @tanstack/react-query

Integrera TanStack Query i Next.js-applikationen

För att integrera TanStack Query i ditt Next.js-projekt måste du skapa och initiera en ny instans av TanStack Query i roten av applikationen—den layout.js fil. För att göra det, importera QueryClient och QueryClientProvider från TanStack Query. Slå sedan in barnens rekvisita med QueryClientProvider som följer:

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

Denna inställning säkerställer att TanStack Query har fullständig åtkomst till applikationens tillstånd.

Implementera paginering med useQuery Hook

De useQuery hook effektiviserar datahämtning och hantering. Genom att tillhandahålla pagineringsparametrar, såsom sidnummer, kan du enkelt hämta specifika delmängder av data.

Dessutom ger kroken olika alternativ och konfigurationer för att anpassa din datahämtningsfunktionalitet, inklusive inställning av cache-alternativ, samt hantering av laddningstillstånd effektivt. Med dessa funktioner kan du enkelt skapa en sömlös pagineringsupplevelse.

Nu, för att implementera paginering i Next.js-appen, skapa en Paginering/page.js fil i src/app katalog. Inuti den här filen gör du följande importer:

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

Definiera sedan en React funktionell komponent. Inuti den här komponenten måste du definiera en funktion som hämtar data från ett externt API. Använd i det här fallet JSONPlaceholder API för att hämta en uppsättning inlägg.

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
}

Definiera nu useQuery-kroken och ange följande parametrar som objekt:

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

De keepPreviousData värde är Sann, vilket säkerställer att appen bevarar tidigare data medan den hämtar ny data. De queryKey parameter är en array som innehåller nyckeln för frågan, i det här fallet, slutpunkten och den aktuella sidan som du vill hämta data för. Slutligen queryFn parameter, hämta inlägg, utlöser funktionsanropet för att hämta data.

Som nämnts tidigare ger kroken flera tillstånd som du kan packa upp, liknande hur du skulle göra destrukturera arrayer och objekt, och använda dem för att förbättra användarupplevelsen (återge lämpliga användargränssnitt) under datahämtningsprocessen. Dessa stater inkluderar laddar, jagsError, och mer.

För att göra det, inkludera följande kod för att återge olika meddelandeskärmar baserat på det aktuella läget för den pågående processen:

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

Slutligen, inkludera koden för JSX-elementen som kommer att återges på webbläsarsidan. Denna kod har även två andra funktioner:

  • När appen hämtar inläggen från API: et kommer de att lagras i data variabel som tillhandahålls av useQuery-kroken. Denna variabel hjälper till att hantera programmets tillstånd. Du kan sedan mappa över listan över inlägg som lagras i denna variabel och rendera dem i webbläsaren.
  • För att lägga till två navigeringsknappar, Tidigare och Nästa, för att tillåta användare att fråga och visa ytterligare sidnumrerade data i enlighet med detta. 
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>
 );

Slutligen, starta utvecklingsservern.

npm run dev

Gå sedan över till http://localhost: 3000:-/Paginering i en webbläsare.

Eftersom du inkluderade Paginering mapp i app katalog, Next.js behandlar den som en rutt, så att du kan komma åt sidan på den URL: en.

Oändlig rullning ger en sömlös surfupplevelse. Ett bra exempel är YouTube, som hämtar nya videor automatiskt och visar dem när du rullar nedåt.

De användInfiniteQuery hook låter dig implementera oändlig rullning genom att hämta data från en server på sidor och automatiskt hämta och rendera nästa sida med data när användaren rullar nedåt.

För att implementera oändlig rullning, lägg till en InfiniteScroll/page.js fil i src/app katalog. Gör sedan följande importer:

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

Skapa sedan en funktionell React-komponent. Inuti denna komponent, liknande pagineringsimplementeringen, skapa en funktion som hämtar inläggens data.

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
}

Till skillnad från sidnumreringsimplementeringen introducerar denna kod en två sekunders fördröjning när data hämtas till tillåt en användare att utforska aktuell data medan de rullar för att utlösa en återhämtning av en ny uppsättning av data.

Definiera nu useInfiniteQuery-kroken. När komponenten initialt monteras kommer kroken att hämta den första sidan med data från servern. När användaren rullar nedåt kommer kroken automatiskt att hämta nästa sida med data och återge den i komponenten.

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

De inlägg variabeln kombinerar alla inlägg från olika sidor till en enda array, vilket resulterar i en tillplattad version av data variabel. Detta gör att du enkelt kan kartlägga och rendera de enskilda inläggen.

För att spåra användarrullningar och ladda mer data när användaren är nära botten av listan kan du definiera en funktion som använder Intersection Observer API för att upptäcka när element skär sig med utsiktsplats.

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

Slutligen, inkludera JSX-elementen för inläggen som renderas i webbläsaren.

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

    •

När du har gjort alla ändringar, besök http://localhost: 3000/InfiniteScroll att se dem i aktion.

TanStack-fråga: Mer än bara datahämtning

Paginering och oändlig rullning är bra exempel som lyfter fram funktionerna hos TanStack Query. Enkelt uttryckt är det ett allsidigt datahanteringsbibliotek.

Med dess omfattande uppsättning funktioner kan du effektivisera din apps datahanteringsprocesser, inklusive effektiv hantering av tillstånd. Vid sidan av andra datarelaterade uppgifter kan du förbättra den övergripande prestandan för dina webbapplikationer, såväl som användarupplevelsen.