Verwenden Sie diese Techniken, um verwendbare Schnittstellen zum Navigieren in Datensätzen zu erstellen.

Die meisten Apps, die Sie entwickeln, verwalten Daten. Da die Programme weiter skaliert werden, kann es immer größere Mengen davon geben. Wenn Anwendungen große Datenmengen nicht effektiv verwalten können, ist ihre Leistung schlecht.

Paginierung und unendliches Scrollen sind zwei beliebte Techniken, mit denen Sie die App-Leistung optimieren können. Sie können Ihnen dabei helfen, die Datenwiedergabe effizienter zu gestalten und das Benutzererlebnis insgesamt zu verbessern.

Paginierung und unendliches Scrollen mit TanStack Query

TanStack-Abfrage– eine Adaption von React Query – ist eine robuste Zustandsverwaltungsbibliothek für JavaScript-Anwendungen. Es bietet neben anderen Funktionen eine effiziente Lösung für die Verwaltung des Anwendungsstatus, einschließlich datenbezogener Aufgaben wie Caching.

Bei der Paginierung wird ein großer Datensatz in kleinere Seiten unterteilt, sodass Benutzer mithilfe von Navigationsschaltflächen in überschaubaren Abschnitten durch den Inhalt navigieren können. Im Gegensatz dazu sorgt das unendliche Scrollen für ein dynamischeres Surferlebnis. Während der Benutzer scrollt, werden neue Daten automatisch geladen und angezeigt, sodass keine explizite Navigation erforderlich ist.

instagram viewer

Paginierung und unendliches Scrollen zielen darauf ab, große Datenmengen effizient zu verwalten und darzustellen. Die Wahl zwischen beiden hängt von den Datenanforderungen der Anwendung ab.

Den Code dieses Projekts finden Sie hier GitHub Repository.

Einrichten eines Next.js-Projekts

Erstellen Sie zunächst ein Next.js-Projekt. Installiere das neueste Version von Next.js 13, die das App-Verzeichnis verwendet.

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

Als nächstes installieren Sie das TanStack-Paket in Ihrem Projekt mit npm, der Node-Paketmanager.

npm i @tanstack/react-query

Integrieren Sie TanStack Query in die Next.js-Anwendung

Um TanStack Query in Ihr Next.js-Projekt zu integrieren, müssen Sie eine neue Instanz von TanStack Query im Stammverzeichnis der Anwendung erstellen und initialisieren – die layout.js Datei. Importieren Sie dazu QueryClient Und QueryClientProvider von TanStack Query. Wickeln Sie dann die Kinderstütze ein QueryClientProvider wie folgt:

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

Dieses Setup stellt sicher, dass TanStack Query vollständigen Zugriff auf den Status der Anwendung hat.

Implementieren Sie die Paginierung mithilfe des useQuery-Hooks

Der useQuery Hook optimiert den Datenabruf und die Datenverwaltung. Durch die Bereitstellung von Paginierungsparametern, wie z. B. Seitenzahlen, können Sie ganz einfach bestimmte Teilmengen von Daten abrufen.

Darüber hinaus bietet der Hook verschiedene Optionen und Konfigurationen zum Anpassen Ihrer Datenabruffunktionalität, einschließlich der Festlegung von Cache-Optionen sowie der effizienten Handhabung von Ladezuständen. Mit diesen Funktionen können Sie mühelos ein nahtloses Paginierungserlebnis erstellen.

Um nun die Paginierung in der Next.js-App zu implementieren, erstellen Sie eine Paginierung/page.js Datei in der src/app Verzeichnis. Führen Sie in dieser Datei die folgenden Importe durch:

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

Definieren Sie dann eine React-Funktionskomponente. Innerhalb dieser Komponente müssen Sie eine Funktion definieren, die Daten von einer externen API abruft. Verwenden Sie in diesem Fall die JSONPlaceholder-API um eine Reihe von Beiträgen abzurufen.

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
}

Definieren Sie nun den useQuery-Hook und geben Sie die folgenden Parameter als Objekte an:

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

Der keepPreviousData Wert ist WAHR, wodurch sichergestellt wird, dass die App beim Abrufen neuer Daten die vorherigen Daten beibehält. Der queryKey Parameter ist ein Array, das den Schlüssel für die Abfrage enthält, in diesem Fall den Endpunkt und die aktuelle Seite, für die Sie Daten abrufen möchten. Schließlich die queryFn Parameter, fetchPosts, löst den Funktionsaufruf zum Abrufen von Daten aus.

Wie bereits erwähnt, stellt der Hook mehrere Zustände bereit, die Sie auf ähnliche Weise entpacken können Arrays und Objekte zerstören, und nutzen Sie sie, um die Benutzererfahrung (durch die Darstellung geeigneter Benutzeroberflächen) während des Datenabrufprozesses zu verbessern. Zu diesen Staaten gehören ladet, ichFehler, und mehr.

Fügen Sie dazu den folgenden Code ein, um verschiedene Nachrichtenbildschirme basierend auf dem aktuellen Status des laufenden Prozesses darzustellen:

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

Fügen Sie abschließend den Code für die JSX-Elemente ein, die auf der Browserseite gerendert werden. Dieser Code erfüllt auch zwei weitere Funktionen:

  • Sobald die App die Beiträge von der API abruft, werden sie im gespeichert Daten Variable, die vom useQuery-Hook bereitgestellt wird. Diese Variable hilft bei der Verwaltung des Anwendungsstatus. Anschließend können Sie die Liste der in dieser Variablen gespeicherten Beiträge zuordnen und sie im Browser rendern.
  • Um zwei Navigationsschaltflächen hinzuzufügen, Vorherige Und Nächste, damit Benutzer entsprechend zusätzliche paginierte Daten abfragen und anzeigen können. 
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>
 );

Starten Sie abschließend den Entwicklungsserver.

npm run dev

Dann gehen Sie rüber zu http://localhost: 3000/Paginierung in einem Browser.

Da Sie das eingeschlossen haben Seitennummerierung Ordner im App Verzeichnis, Next.js behandelt es als Route und ermöglicht Ihnen den Zugriff auf die Seite unter dieser URL.

Unendliches Scrollen sorgt für ein nahtloses Surferlebnis. Ein gutes Beispiel ist YouTube, das neue Videos automatisch abruft und beim Herunterscrollen anzeigt.

Der useInfiniteQuery Mit dem Hook können Sie unendliches Scrollen implementieren, indem Sie Daten seitenweise von einem Server abrufen und automatisch die nächste Datenseite abrufen und rendern, während der Benutzer nach unten scrollt.

Um unendliches Scrollen zu implementieren, fügen Sie eine hinzu InfiniteScroll/page.js Datei in der src/app Verzeichnis. Führen Sie dann die folgenden Importe durch:

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

Als nächstes erstellen Sie eine React-Funktionskomponente. Erstellen Sie innerhalb dieser Komponente, ähnlich der Paginierungsimplementierung, eine Funktion, die die Daten der Beiträge abruft.

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
}

Im Gegensatz zur Paginierungsimplementierung führt dieser Code beim Abrufen von Daten zu einer Verzögerung von zwei Sekunden Ermöglichen Sie einem Benutzer, die aktuellen Daten zu erkunden, während er scrollt, um einen erneuten Abruf eines neuen Satzes auszulösen Daten.

Definieren Sie nun den useInfiniteQuery-Hook. Wenn die Komponente zum ersten Mal gemountet wird, ruft der Hook die erste Seite mit Daten vom Server ab. Wenn der Benutzer nach unten scrollt, ruft der Hook automatisch die nächste Datenseite ab und rendert sie in der Komponente.

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

Der Beiträge Die Variable kombiniert alle Beiträge von verschiedenen Seiten in einem einzigen Array, was zu einer abgeflachten Version der führt Daten Variable. Dadurch können Sie die einzelnen Beiträge einfach zuordnen und rendern.

Sie können festlegen, dass das Scrollen des Benutzers verfolgt und mehr Daten geladen werden sollen, wenn sich der Benutzer ganz unten in der Liste befindet eine Funktion, die die Intersection Observer API nutzt, um zu erkennen, wann sich Elemente mit dem überschneiden Ansichtsfenster.

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

Fügen Sie abschließend die JSX-Elemente für die Beiträge hinzu, die im Browser gerendert werden.

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

    •

Wenn Sie alle Änderungen vorgenommen haben, besuchen Sie http://localhost: 3000/InfiniteScroll um sie in Aktion zu sehen.

TanStack-Abfrage: Mehr als nur Datenabruf

Paginierung und unendliches Scrollen sind gute Beispiele, die die Fähigkeiten von TanStack Query hervorheben. Einfach ausgedrückt handelt es sich um eine umfassende Datenverwaltungsbibliothek.

Mit den umfangreichen Funktionen können Sie die Datenverwaltungsprozesse Ihrer App optimieren, einschließlich einer effizienten Statusverwaltung. Neben anderen datenbezogenen Aufgaben können Sie die Gesamtleistung Ihrer Webanwendungen sowie das Benutzererlebnis verbessern.