Next.js ve TanStack Sorgusu ile Sonsuz Kaydırma ve Sayfalandırma Nasıl Uygulanır?

Geliştireceğiniz çoğu uygulama verileri yönetecektir; Programlar ölçeklenmeye devam ettikçe, giderek daha büyük miktarda olabilir. Uygulamalar büyük miktarda veriyi etkili bir şekilde yönetemediğinde düşük performans gösterir.

Sayfalandırma ve sonsuz kaydırma, uygulama performansını optimize etmek için kullanabileceğiniz iki popüler tekniktir. Veri işlemeyi daha verimli bir şekilde yönetmenize ve genel kullanıcı deneyimini geliştirmenize yardımcı olabilirler.

TanStack Sorgusunu Kullanarak Sayfalandırma ve Sonsuz Kaydırma

TanStack Sorgusu—React Query'nin bir uyarlaması—JavaScript uygulamaları için sağlam bir durum yönetimi kitaplığıdır. Önbelleğe alma gibi veriyle ilgili görevler de dahil olmak üzere diğer işlevlerin yanı sıra uygulama durumunu yönetmek için etkili bir çözüm sunar.

Sayfalandırma, büyük bir veri kümesini daha küçük sayfalara bölmeyi içerir ve kullanıcıların gezinme düğmelerini kullanarak yönetilebilir parçalar halinde içerikte gezinmesine olanak tanır. Bunun aksine, sonsuz kaydırma daha dinamik bir tarama deneyimi sağlar. Kullanıcı ekranı kaydırdıkça yeni veriler otomatik olarak yüklenir ve görüntülenir; böylece açık gezinme ihtiyacı ortadan kalkar.

Sayfalandırma ve sonsuz kaydırma, büyük miktarda veriyi verimli bir şekilde yönetmeyi ve sunmayı amaçlamaktadır. İkisi arasındaki seçim uygulamanın veri gereksinimlerine bağlıdır.

Next.js Projesi Kurma

Başlamak için bir Next.js projesi oluşturun. Yükle Next.js 13'ün Uygulama dizinini kullanan en son sürümü.

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

Daha sonra projenize TanStack paketini kullanarak yükleyin. npm, Düğüm paket yöneticisi.

npm i @tanstack/react-query

TanStack Sorgusunu Next.js Uygulamasına Entegre Edin

TanStack Query'yi Next.js projenize entegre etmek için uygulamanın kökünde yeni bir TanStack Query örneği oluşturup başlatmanız gerekir; düzen.js dosya. Bunu yapmak için içe aktarın Sorgu İstemcisi Ve Sorgu İstemcisi Sağlayıcısı TanStack Query'den. Daha sonra çocuk aksesuarlarını sarın Sorgu İstemcisi Sağlayıcısı aşağıdaki gibi:

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

Bu kurulum, TanStack Query'nin uygulamanın durumuna tam erişime sahip olmasını sağlar.

UseQuery Hook'u Kullanarak Sayfalandırmayı Uygulama

sorguyu kullan hook, veri alımını ve yönetimini kolaylaştırır. Sayfa numaraları gibi sayfalandırma parametreleri sağlayarak belirli veri alt kümelerini kolayca alabilirsiniz.

Ek olarak kanca, önbellek seçeneklerini ayarlamanın yanı sıra yükleme durumlarını verimli bir şekilde yönetme dahil olmak üzere veri alma işlevinizi özelleştirmek için çeşitli seçenekler ve yapılandırmalar sağlar. Bu özelliklerle zahmetsizce kusursuz bir sayfalandırma deneyimi oluşturabilirsiniz.

Şimdi Next.js uygulamasında sayfalandırmayı uygulamak için bir Sayfalandırma/page.js dosyadaki kaynak/uygulama dizin. Bu dosyanın içinde aşağıdaki içe aktarmaları yapın:

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

Ardından bir React fonksiyonel bileşeni tanımlayın. Bu bileşenin içinde harici bir API'den veri getirecek bir fonksiyon tanımlamanız gerekir. Bu durumda, şunu kullanın: JSONPlaceholder API'si Bir dizi gönderiyi getirmek için.

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
}

Şimdi useQuery kancasını tanımlayın ve aşağıdaki parametreleri nesneler olarak belirtin:

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

KeepÖnceki Veriler değer şudur doğruBu, uygulamanın yeni veriler alırken önceki verileri korumasını sağlar. sorguAnahtarı parametresi sorgunun anahtarını (bu durumda uç noktayı ve veri almak istediğiniz geçerli sayfayı) içeren bir dizidir. Son olarak, sorguFn parametre, gönderileri getir, verileri almak için işlev çağrısını tetikler.

Daha önce de belirtildiği gibi kanca, paketten çıkarabileceğiniz çeşitli durumlar sağlar. dizileri ve nesneleri yok etmek, ve veri getirme işlemi sırasında kullanıcı deneyimini geliştirmek (uygun kullanıcı arayüzlerini oluşturmak) için bunları kullanın. Bu durumlar şunları içerir: yükleniyor, BensHata, ve dahası.

Bunu yapmak için, devam eden sürecin mevcut durumuna göre farklı mesaj ekranları oluşturmak üzere aşağıdaki kodu ekleyin:

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

Son olarak, tarayıcı sayfasında işlenecek JSX öğelerinin kodunu ekleyin. Bu kod ayrıca iki işleve daha hizmet eder:

• Uygulama, gönderileri API'den aldıktan sonra, bunlar veri useQuery kancası tarafından sağlanan değişken. Bu değişken uygulamanın durumunun yönetilmesine yardımcı olur. Daha sonra bu değişkende saklanan gönderilerin listesini eşleyebilir ve bunları tarayıcıda oluşturabilirsiniz.
• İki gezinme düğmesi eklemek için, Öncesi Ve Sonraki, kullanıcıların buna göre ek sayfalandırılmış verileri sorgulamasına ve görüntülemesine olanak tanır.

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

Son olarak geliştirme sunucusunu başlatın.

npm run dev

Daha sonra şu adrese gidin: http://localhost: 3000/Sayfalandırma bir tarayıcıda.

Şunu dahil ettiğinizden beri Sayfalandırma içindeki klasör uygulama Next.js, dizini bir rota olarak değerlendirerek söz konusu URL'deki sayfaya erişmenizi sağlar.

Sonsuz kaydırma kusursuz bir gezinme deneyimi sağlar. Bunun iyi bir örneği, yeni videoları otomatik olarak getiren ve siz aşağı kaydırdıkça bunları görüntüleyen YouTube'dur.

Sonsuz Sorguyu kullan hook, bir sunucudan sayfalar halinde veri alarak ve kullanıcı aşağı kaydırdıkça bir sonraki veri sayfasını otomatik olarak alıp işleyerek sonsuz kaydırma uygulamanıza olanak tanır.

Sonsuz kaydırmayı uygulamak için bir InfiniteScroll/page.js dosyadaki kaynak/uygulama dizin. Ardından aşağıdaki içe aktarmaları yapın:

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

Daha sonra bir React işlevsel bileşeni oluşturun. Bu bileşenin içinde, sayfalandırma uygulamasına benzer şekilde, gönderilerin verilerini getirecek bir işlev oluşturun.

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
}

Sayfalandırma uygulamasından farklı olarak bu kod, veriyi bilgisayara getirirken iki saniyelik bir gecikmeye neden olur. Kullanıcının, yeni bir veri kümesinin yeniden getirilmesini tetiklemek için kaydırma yaparken mevcut verileri keşfetmesine olanak tanır. veri.

Şimdi useInfiniteQuery kancasını tanımlayın. Bileşen ilk kez bağlandığında, kanca sunucudan verilerin ilk sayfasını alacaktır. Kullanıcı aşağı kaydırdıkça kanca otomatik olarak bir sonraki veri sayfasını getirecek ve onu bileşende oluşturacaktır.

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

gönderiler değişken, farklı sayfalardaki tüm gönderileri tek bir dizide birleştirerek, dizinin düzleştirilmiş bir versiyonunu oluşturur. veri değişken. Bu, tek tek gönderileri kolayca haritalamanıza ve oluşturmanıza olanak tanır.

Kullanıcı kaydırmalarını izlemek ve kullanıcı listenin en altına yaklaştığında daha fazla veri yüklemek için Öğelerin nesneyle ne zaman kesiştiğini tespit etmek için Kesişme Gözlemcisi API'sini kullanan bir işlev görünüm alanı.

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

Son olarak tarayıcıda oluşturulan gönderiler için JSX öğelerini ekleyin.

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

Tüm değişiklikleri yaptıktan sonra şu adresi ziyaret edin: http://localhost: 3000/Sonsuz Kaydırma onları çalışırken görmek için.

TanStack Sorgusu: Veri Getirmekten Daha Fazlası

Sayfalandırma ve sonsuz kaydırma, TanStack Query'nin yeteneklerini vurgulayan iyi örneklerdir. Basitçe söylemek gerekirse, çok yönlü bir veri yönetimi kitaplığıdır.

Kapsamlı özellikleri sayesinde, durumun verimli şekilde işlenmesi de dahil olmak üzere uygulamanızın veri yönetimi süreçlerini kolaylaştırabilirsiniz. Verilerle ilgili diğer görevlerin yanı sıra, web uygulamalarınızın genel performansını ve kullanıcı deneyimini iyileştirebilirsiniz.