Gunakan teknik ini untuk membuat antarmuka yang dapat digunakan untuk menavigasi kumpulan data.

Sebagian besar aplikasi yang Anda kembangkan akan mengelola data; seiring dengan skala program yang terus meningkat, jumlahnya akan semakin besar. Ketika aplikasi gagal mengelola data dalam jumlah besar secara efektif, kinerjanya buruk.

Penomoran halaman dan pengguliran tak terbatas adalah dua teknik populer yang dapat Anda gunakan untuk mengoptimalkan kinerja aplikasi. Mereka dapat membantu Anda menangani rendering data dengan lebih efisien dan meningkatkan pengalaman pengguna secara keseluruhan.

Paginasi dan Pengguliran Tak Terbatas Menggunakan TanStack Query

Kueri TanStack—sebuah adaptasi dari React Query—adalah perpustakaan manajemen keadaan yang kuat untuk aplikasi JavaScript. Ini menawarkan solusi efisien untuk mengelola status aplikasi, di antara fungsi lainnya, termasuk tugas terkait data seperti cache.

Penomoran halaman melibatkan pembagian kumpulan data besar menjadi halaman yang lebih kecil, memungkinkan pengguna menavigasi konten dalam bagian yang dapat dikelola menggunakan tombol navigasi. Sebaliknya, pengguliran tak terbatas memberikan pengalaman penelusuran yang lebih dinamis. Saat pengguna menggulir, data baru dimuat dan ditampilkan secara otomatis, sehingga menghilangkan kebutuhan navigasi eksplisit.

instagram viewer

Penomoran halaman dan pengguliran tak terbatas bertujuan untuk mengelola dan menyajikan data dalam jumlah besar secara efisien. Pilihan antara keduanya bergantung pada kebutuhan data aplikasi.

Anda dapat menemukan kode proyek ini di sini GitHub gudang.

Menyiapkan Proyek Next.js

Untuk memulai, buat proyek Next.js. Instal versi terbaru Next.js 13 yang menggunakan direktori App.

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

Selanjutnya, instal paket TanStack di proyek Anda menggunakan npm, manajer paket Node.

npm i @tanstack/react-query

Integrasikan TanStack Query di Aplikasi Next.js

Untuk mengintegrasikan TanStack Query di proyek Next.js, Anda perlu membuat dan menginisialisasi instance TanStack Query baru di root aplikasi— tata letak.js mengajukan. Untuk melakukan itu, impor Klien Kueri Dan Penyedia Klien Kueri dari Kueri TanStack. Kemudian bungkus alat peraga anak dengan Penyedia Klien Kueri sebagai berikut:

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

Pengaturan ini memastikan bahwa TanStack Query memiliki akses penuh ke status aplikasi.

Terapkan Pagination Menggunakan Kait useQuery

Itu gunakan Kueri hook menyederhanakan pengambilan dan pengelolaan data. Dengan menyediakan parameter penomoran halaman, seperti nomor halaman, Anda dapat dengan mudah mengambil subkumpulan data tertentu.

Selain itu, hook menyediakan berbagai opsi dan konfigurasi untuk menyesuaikan fungsionalitas pengambilan data Anda, termasuk mengatur opsi cache, serta menangani status pemuatan secara efisien. Dengan fitur ini, Anda dapat dengan mudah menciptakan pengalaman penomoran halaman yang lancar.

Sekarang, untuk mengimplementasikan penomoran halaman di aplikasi Next.js, buat a Paginasi/halaman.js berkas di src/aplikasi direktori. Di dalam file ini, lakukan impor berikut:

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

Kemudian, tentukan komponen fungsional React. Di dalam komponen ini, Anda perlu mendefinisikan fungsi yang akan mengambil data dari API eksternal. Dalam hal ini, gunakan API JSONPlaceholder untuk mengambil satu set postingan.

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
}

Sekarang, tentukan hook useQuery, dan tentukan parameter berikut sebagai objek:

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

Itu simpanData Sebelumnya nilai adalah BENAR, yang memastikan bahwa, saat mengambil data baru, aplikasi mempertahankan data sebelumnya. Itu kunci kueri parameter adalah array yang berisi kunci untuk kueri, dalam hal ini, titik akhir dan halaman saat ini yang datanya ingin Anda ambil. Terakhir, permintaanFn parameter, ambilPostingan, memicu panggilan fungsi untuk mengambil data.

Seperti disebutkan sebelumnya, hook menyediakan beberapa status yang dapat Anda bongkar, serupa dengan yang Anda lakukan menghancurkan array dan objek, dan memanfaatkannya untuk meningkatkan pengalaman pengguna (merender UI yang sesuai) selama proses pengambilan data. Negara-negara bagian ini termasuk sedang Memuat, SayasKesalahan, dan banyak lagi.

Untuk melakukannya, sertakan kode berikut untuk merender layar pesan yang berbeda berdasarkan status proses yang sedang berlangsung saat ini:

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

Terakhir, sertakan kode untuk elemen JSX yang akan dirender di halaman browser. Kode ini juga memiliki dua fungsi lainnya:

  • Setelah aplikasi mengambil postingan dari API, postingan tersebut akan disimpan di data variabel yang disediakan oleh kait useQuery. Variabel ini membantu mengelola status aplikasi. Anda kemudian dapat memetakan daftar postingan yang disimpan dalam variabel ini, dan merendernya di browser.
  • Untuk menambahkan dua tombol navigasi, Sebelumnya Dan Berikutnya, untuk memungkinkan pengguna melakukan kueri dan menampilkan data paginasi tambahan yang sesuai. 
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>
 );

Terakhir, mulai server pengembangan.

npm run dev

Lalu, pergilah ke http://localhost: 3000/Paginasi di peramban.

Karena Anda memasukkan Paginasi folder di aplikasi direktori, Next.js memperlakukannya sebagai rute, memungkinkan Anda mengakses halaman di URL tersebut.

Pengguliran tanpa batas memberikan pengalaman penelusuran yang lancar. Contoh bagusnya adalah YouTube, yang mengambil video baru secara otomatis dan menampilkannya saat Anda menggulir ke bawah.

Itu gunakanInfiniteQuery hook memungkinkan Anda menerapkan pengguliran tak terbatas dengan mengambil data dari server di halaman dan secara otomatis mengambil dan merender halaman data berikutnya saat pengguna menggulir ke bawah.

Untuk menerapkan pengguliran tak terbatas, tambahkan Gulir Tak Terbatas/halaman.js berkas di src/aplikasi direktori. Kemudian, lakukan impor berikut:

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

Selanjutnya, buat komponen fungsional React. Di dalam komponen ini, mirip dengan implementasi penomoran halaman, buatlah fungsi yang akan mengambil data postingan.

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
}

Berbeda dengan implementasi penomoran halaman, kode ini menimbulkan penundaan dua detik saat mengambil data memungkinkan pengguna menjelajahi data saat ini sambil menggulir untuk memicu pengambilan ulang kumpulan data baru data.

Sekarang, tentukan kait useInfiniteQuery. Saat komponen pertama kali dipasang, hook akan mengambil halaman pertama data dari server. Saat pengguna menggulir ke bawah, hook akan secara otomatis mengambil halaman data berikutnya dan merendernya di komponen.

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

Itu posting variabel menggabungkan semua postingan dari halaman berbeda ke dalam satu larik, menghasilkan versi yang diratakan data variabel. Ini memungkinkan Anda memetakan dan merender masing-masing postingan dengan mudah.

Untuk melacak gulir pengguna dan memuat lebih banyak data saat pengguna berada di dekat bagian bawah daftar, Anda dapat menentukan sebuah fungsi yang memanfaatkan API Intersection Observer untuk mendeteksi kapan elemen berpotongan dengan area pandang.

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

Terakhir, sertakan elemen JSX untuk postingan yang dirender di 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>
     );
    

    •

Setelah Anda membuat semua perubahan, kunjungi http://localhost: 3000/Gulir Tak Terbatas untuk melihat mereka beraksi.

TanStack Query: Lebih dari Sekadar Pengambilan Data

Paginasi dan pengguliran tak terbatas adalah contoh bagus yang menyoroti kemampuan TanStack Query. Sederhananya, ini adalah perpustakaan manajemen data yang lengkap.

Dengan rangkaian fiturnya yang ekstensif, Anda dapat menyederhanakan proses pengelolaan data aplikasi Anda, termasuk penanganan status yang efisien. Di samping tugas terkait data lainnya, Anda dapat meningkatkan kinerja aplikasi web Anda secara keseluruhan, serta pengalaman pengguna.