Πώς να εφαρμόσετε την άπειρη κύλιση και σελιδοποίηση με το Next.js και το TanStack Query

Οι περισσότερες εφαρμογές που θα αναπτύξετε θα διαχειρίζονται δεδομένα. Καθώς τα προγράμματα συνεχίζουν να κλιμακώνονται, μπορεί να υπάρχει ολοένα και μεγαλύτερη ποσότητα από αυτό. Όταν οι εφαρμογές αποτυγχάνουν να διαχειριστούν αποτελεσματικά μεγάλους όγκους δεδομένων, έχουν κακή απόδοση.

Η σελιδοποίηση και η άπειρη κύλιση είναι δύο δημοφιλείς τεχνικές που μπορείτε να χρησιμοποιήσετε για να βελτιστοποιήσετε την απόδοση της εφαρμογής. Μπορούν να σας βοηθήσουν να χειριστείτε πιο αποτελεσματικά την απόδοση δεδομένων και να βελτιώσετε τη συνολική εμπειρία χρήστη.

Σελιδοποίηση και άπειρη κύλιση με χρήση ερωτήματος TanStack

Ερώτημα TanStack—μια προσαρμογή του React Query—είναι μια ισχυρή βιβλιοθήκη διαχείρισης κατάστασης για εφαρμογές JavaScript. Προσφέρει μια αποτελεσματική λύση για τη διαχείριση της κατάστασης της εφαρμογής, μεταξύ άλλων λειτουργιών, συμπεριλαμβανομένων εργασιών που σχετίζονται με δεδομένα, όπως η προσωρινή αποθήκευση.

Η σελιδοποίηση περιλαμβάνει τη διαίρεση ενός μεγάλου δεδομένων σε μικρότερες σελίδες, επιτρέποντας στους χρήστες να πλοηγούνται στο περιεχόμενο σε διαχειρίσιμα κομμάτια χρησιμοποιώντας κουμπιά πλοήγησης. Αντίθετα, η άπειρη κύλιση παρέχει μια πιο δυναμική εμπειρία περιήγησης. Καθώς ο χρήστης κάνει κύλιση, τα νέα δεδομένα φορτώνονται και εμφανίζονται αυτόματα, εξαλείφοντας την ανάγκη για ρητή πλοήγηση.

Η σελιδοποίηση και η άπειρη κύλιση στοχεύουν στην αποτελεσματική διαχείριση και παρουσίαση μεγάλων ποσοτήτων δεδομένων. Η επιλογή μεταξύ των δύο εξαρτάται από τις απαιτήσεις δεδομένων της εφαρμογής.

Ρύθμιση ενός έργου Next.js

Για να ξεκινήσετε, δημιουργήστε ένα έργο Next.js. Εγκαταστήστε το τελευταία έκδοση του Next.js 13 που χρησιμοποιεί τον κατάλογο εφαρμογών.

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

Στη συνέχεια, εγκαταστήστε το πακέτο TanStack στο έργο σας χρησιμοποιώντας npm, ο διαχειριστής πακέτων Node.

npm i @tanstack/react-query

Ενσωματώστε το TanStack Query στην εφαρμογή Next.js

Για να ενσωματώσετε το TanStack Query στο έργο Next.js, πρέπει να δημιουργήσετε και να αρχικοποιήσετε μια νέα παρουσία του TanStack Query στη ρίζα της εφαρμογής—το διάταξη.js αρχείο. Για να το κάνετε αυτό, εισάγετε QueryClient και QueryClientProvider από το TanStack Query. Στη συνέχεια, τυλίξτε το παιδικό στήριγμα με QueryClientProvider ως εξής:

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

Αυτή η ρύθμιση διασφαλίζει ότι το TanStack Query έχει πλήρη πρόσβαση στην κατάσταση της εφαρμογής.

Εφαρμογή σελιδοποίησης χρησιμοποιώντας το άγκιστρο useQuery

ο useQuery Το hook βελτιστοποιεί την ανάκτηση και διαχείριση δεδομένων. Παρέχοντας παραμέτρους σελιδοποίησης, όπως αριθμούς σελίδων, μπορείτε εύκολα να ανακτήσετε συγκεκριμένα υποσύνολα δεδομένων.

Επιπλέον, το άγκιστρο παρέχει διάφορες επιλογές και διαμορφώσεις για την προσαρμογή της λειτουργικότητας ανάκτησης δεδομένων, συμπεριλαμβανομένης της ρύθμισης επιλογών προσωρινής μνήμης, καθώς και του αποτελεσματικού χειρισμού των καταστάσεων φόρτωσης. Με αυτές τις δυνατότητες, μπορείτε να δημιουργήσετε αβίαστα μια απρόσκοπτη εμπειρία σελιδοποίησης.

Τώρα, για να εφαρμόσετε τη σελιδοποίηση στην εφαρμογή Next.js, δημιουργήστε ένα Σελιδοποίηση/page.js αρχείο στο src/app Ευρετήριο. Μέσα σε αυτό το αρχείο, πραγματοποιήστε τις ακόλουθες εισαγωγές:

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

Στη συνέχεια, ορίστε ένα λειτουργικό στοιχείο React. Μέσα σε αυτό το στοιχείο, πρέπει να ορίσετε μια συνάρτηση που θα ανακτά δεδομένα από ένα εξωτερικό API. Σε αυτή την περίπτωση, χρησιμοποιήστε το JSONPlaceholder API για να φέρετε ένα σύνολο αναρτήσεων.

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
}

Τώρα, ορίστε το άγκιστρο useQuery και καθορίστε τις ακόλουθες παραμέτρους ως αντικείμενα:

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

ο διατήρηση Προηγούμενων Δεδομένων αξία είναι αληθής, το οποίο διασφαλίζει ότι, κατά τη λήψη νέων δεδομένων, η εφαρμογή διατηρεί τα προηγούμενα δεδομένα. ο queryKey Η παράμετρος είναι ένας πίνακας που περιέχει το κλειδί για το ερώτημα, σε αυτήν την περίπτωση, το τελικό σημείο και την τρέχουσα σελίδα για την οποία θέλετε να ανακτήσετε δεδομένα. Τέλος, το queryFn παράμετρος, fetchPosts, ενεργοποιεί την κλήση συνάρτησης για ανάκτηση δεδομένων.

Όπως αναφέρθηκε προηγουμένως, το άγκιστρο παρέχει πολλές καταστάσεις που μπορείτε να αποσυσκευάσετε, όπως θα κάνατε καταστροφή συστοιχιών και αντικειμένων, και να τα χρησιμοποιήσει για να βελτιώσει την εμπειρία του χρήστη (απόδοση κατάλληλων UI) κατά τη διαδικασία ανάκτησης δεδομένων. Αυτά τα κράτη περιλαμβάνουν είναι Φόρτωση, ΕγώsΣφάλμα, κι αλλα.

Για να το κάνετε αυτό, συμπεριλάβετε τον ακόλουθο κώδικα για να αποδώσετε διαφορετικές οθόνες μηνυμάτων με βάση την τρέχουσα κατάσταση της εν εξελίξει διαδικασίας:

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

Τέλος, συμπεριλάβετε τον κώδικα για τα στοιχεία JSX που θα αποδοθούν στη σελίδα του προγράμματος περιήγησης. Αυτός ο κώδικας εξυπηρετεί επίσης δύο άλλες λειτουργίες:

• Μόλις η εφαρμογή ανακτήσει τις αναρτήσεις από το API, θα αποθηκευτούν στο δεδομένα μεταβλητή που παρέχεται από το άγκιστρο useQuery. Αυτή η μεταβλητή βοηθά στη διαχείριση της κατάστασης της εφαρμογής. Στη συνέχεια, μπορείτε να αντιστοιχίσετε τη λίστα των αναρτήσεων που είναι αποθηκευμένες σε αυτήν τη μεταβλητή και να τις αποδώσετε στο πρόγραμμα περιήγησης.
• Για να προσθέσετε δύο κουμπιά πλοήγησης, Προηγούμενος και Επόμενο, για να επιτραπεί στους χρήστες να υποβάλλουν ερωτήματα και να εμφανίζουν ανάλογα σελιδοποιημένα δεδομένα.

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

Τέλος, ξεκινήστε τον διακομιστή ανάπτυξης.

npm run dev

Στη συνέχεια, κατευθυνθείτε προς http://localhost: 3000/Σελιδοποίηση σε ένα πρόγραμμα περιήγησης.

Αφού συμπεριλάβατε το Σελιδοποίηση φάκελο στο εφαρμογή κατάλογο, το Next.js το αντιμετωπίζει ως διαδρομή, επιτρέποντάς σας να έχετε πρόσβαση στη σελίδα σε αυτήν τη διεύθυνση URL.

Η άπειρη κύλιση παρέχει μια απρόσκοπτη εμπειρία περιήγησης. Ένα καλό παράδειγμα είναι το YouTube, το οποίο ανακτά νέα βίντεο αυτόματα και τα εμφανίζει καθώς κάνετε κύλιση προς τα κάτω.

ο useInfiniteQuery Το hook σάς επιτρέπει να εφαρμόσετε άπειρη κύλιση λαμβάνοντας δεδομένα από έναν διακομιστή σε σελίδες και αυτόματα ανάκτηση και απόδοση της επόμενης σελίδας δεδομένων καθώς ο χρήστης κάνει κύλιση προς τα κάτω.

Για να εφαρμόσετε άπειρη κύλιση, προσθέστε ένα InfiniteScroll/page.js αρχείο στο src/app Ευρετήριο. Στη συνέχεια, πραγματοποιήστε τις ακόλουθες εισαγωγές:

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

Στη συνέχεια, δημιουργήστε ένα λειτουργικό στοιχείο React. Μέσα σε αυτό το στοιχείο, παρόμοια με την υλοποίηση σελιδοποίησης, δημιουργήστε μια συνάρτηση που θα ανακτά τα δεδομένα των αναρτήσεων.

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
}

Σε αντίθεση με την εφαρμογή σελιδοποίησης, αυτός ο κώδικας εισάγει μια καθυστέρηση δύο δευτερολέπτων κατά την ανάκτηση δεδομένων επιτρέπουν σε έναν χρήστη να εξερευνήσει τα τρέχοντα δεδομένα ενώ κάνει κύλιση για να ενεργοποιήσει μια εκ νέου ανάκτηση ενός νέου συνόλου δεδομένα.

Τώρα, ορίστε το άγκιστρο useInfiniteQuery. Όταν το στοιχείο προσαρτηθεί αρχικά, το άγκιστρο θα λάβει την πρώτη σελίδα δεδομένων από τον διακομιστή. Καθώς ο χρήστης κάνει κύλιση προς τα κάτω, το άγκιστρο θα ανακτήσει αυτόματα την επόμενη σελίδα δεδομένων και θα τα αποδώσει στο στοιχείο.

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

ο αναρτήσεις η μεταβλητή συνδυάζει όλες τις αναρτήσεις από διαφορετικές σελίδες σε έναν ενιαίο πίνακα, με αποτέλεσμα μια ισοπεδωμένη έκδοση του δεδομένα μεταβλητός. Αυτό σας επιτρέπει να αντιστοιχίσετε και να αποδώσετε εύκολα τις μεμονωμένες αναρτήσεις.

Για να παρακολουθείτε κύλιση χρήστη και να φορτώνετε περισσότερα δεδομένα όταν ο χρήστης βρίσκεται κοντά στο κάτω μέρος της λίστας, μπορείτε να ορίσετε μια συνάρτηση που χρησιμοποιεί το Intersection Observer API για να ανιχνεύσει πότε τέμνονται στοιχεία με το θέαση.

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

Τέλος, συμπεριλάβετε τα στοιχεία JSX για τις αναρτήσεις που αποδίδονται στο πρόγραμμα περιήγησης.

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

Αφού κάνετε όλες τις αλλαγές, επισκεφθείτε http://localhost: 3000/InfiniteScroll να τους δεις σε δράση.

Ερώτημα TanStack: Περισσότερα από απλή ανάκτηση δεδομένων

Η σελιδοποίηση και η άπειρη κύλιση είναι καλά παραδείγματα που τονίζουν τις δυνατότητες του TanStack Query. Με απλά λόγια, είναι μια ολοκληρωμένη βιβλιοθήκη διαχείρισης δεδομένων.

Με το εκτεταμένο σύνολο δυνατοτήτων του, μπορείτε να βελτιστοποιήσετε τις διαδικασίες διαχείρισης δεδομένων της εφαρμογής σας, συμπεριλαμβανομένου του αποτελεσματικού χειρισμού της κατάστασης. Παράλληλα με άλλες εργασίες που σχετίζονται με δεδομένα, μπορείτε να βελτιώσετε τη συνολική απόδοση των εφαρμογών Ιστού σας, καθώς και την εμπειρία χρήστη.