Већина апликација које ћете развити управљаће подацима; како програми настављају да се повећавају, може их бити све већа количина. Када апликације не успеју да ефикасно управљају великим количинама података, оне раде лоше.
Пагинација и бесконачно померање су две популарне технике које можете да користите за оптимизацију перформанси апликације. Они вам могу помоћи да ефикасније управљате приказивањем података и побољшају целокупно корисничко искуство.
Преглед садржаја
Пагинација и бесконачно померање помоћу ТанСтацк упита
ТанСтацк Куери—адаптација Реацт Куери-а — је робусна библиотека за управљање стањем за ЈаваСцрипт апликације. Нуди ефикасно решење за управљање стањем апликације, између осталих функционалности, укључујући задатке у вези са подацима као што је кеширање.
Пагинација укључује поделу великог скупа података на мање странице, омогућавајући корисницима да се крећу по садржају у деловима којима се може управљати помоћу дугмади за навигацију. Насупрот томе, бесконачно померање пружа динамичније искуство прегледања. Како корисник скролује, нови подаци се аутоматски учитавају и приказују, елиминишући потребу за експлицитном навигацијом.
Пагинација и бесконачно померање имају за циљ ефикасно управљање и представљање великих количина података. Избор између ова два зависи од захтева за подацима апликације.
Овде можете пронаћи код овог пројекта ГитХуб репозиторијум.
Подешавање пројекта Нект.јс
Да бисте започели, направите Нект.јс пројекат. Инсталирајте најновију верзију Нект.јс 13 која користи директоријум Апп.
npx create-next-app@latest next-project --app
Затим инсталирајте ТанСтацк пакет у свој пројекат користећи нпм, Ноде менаџер пакета.
npm i @tanstack/react-query
Интегришите ТанСтацк Куери у Нект.јс апликацију
Да бисте интегрисали ТанСтацк Куери у ваш Нект.јс пројекат, потребно је да креирате и иницијализујете нову инстанцу ТанСтацк Куери-а у корену апликације—датотеци лаиоут.јс. Да бисте то урадили, увезите КуериЦлиент и КуериЦлиентПровидер из ТанСтацк Куерија. Затим умотајте дечији реквизит са КуериЦлиентПровидер на следећи начин:
"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',
};export default function RootLayout({ children }) {
const queryClient = new QueryClient();return (
<html lang="en">
<body>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</body>
</html>
);
}export { metadata };
Ово подешавање осигурава да ТанСтацк Куери има потпун приступ стању апликације.
УсеКуери кука поједностављује дохваћање података и управљање њима. Обезбеђивањем параметара пагинације, као што су бројеви страница, можете лако да преузмете одређене подскупове података.
Поред тога, кука пружа различите опције и конфигурације за прилагођавање ваше функционалности преузимања података, укључујући подешавање опција кеша, као и ефикасно руковање стањима учитавања. Са овим функцијама можете без напора да креирате беспрекорно искуство пагинације.
Сада, да бисте применили пагинацију у апликацији Нект.јс, креирајте датотеку Пагинатион/паге.јс у директоријуму срц/апп. Унутар ове датотеке направите следеће увозе:
"use client"
import React, { useState } from 'react';
import { useQuery} from '@tanstack/react-query';
import './page.styles.css';
Затим дефинишите Реацт функционалну компоненту. Унутар ове компоненте, потребно је да дефинишете функцију која ће преузимати податке из спољног АПИ-ја. У овом случају користите ЈСОНПлацехолдер АПИ да преузмете скуп постова.
export default function Pagination() {
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) {
throw new Error('Failed to fetch posts');
}
const data = await response.json();
return data;
} catch (error) {
console.error(error);
throw error;
}
};
}
Сада дефинишите усеКуери куку и наведите следеће параметре као објекте:
const { isLoading, isError, error, data } = useQuery({
keepPreviousData: true,
queryKey: ['posts', page],
queryFn: fetchPosts,
});
Вредност кеепПревиоусДата је тачна, што обезбеђује да, док преузима нове податке, апликација чува претходне податке. Параметар куериКеи је низ који садржи кључ за упит, у овом случају, крајњу тачку и тренутну страницу за коју желите да преузмете податке. На крају, параметар куериФн, фетцхПостс, покреће позив функције за преузимање података.
Као што је раније поменуто, кука обезбеђује неколико стања која можете да распакујете, слично као што бисте деструктурирали низове и објекте и искористили их за побољшање корисничког искуства (рендеровање одговарајућих корисничких интерфејса) током процеса преузимања података. Ова стања укључују исЛоадинг, исЕррор и још много тога.
Да бисте то урадили, укључите следећи код да бисте приказали различите екране порука на основу тренутног стања процеса у току:
if (isLoading) {
return (<h2>Loading...</h2>);
} if (isError) {
return (<h2 className="error-message">{error.message}</h2>);
}
На крају, укључите код за ЈСКС елементе који ће се приказати на страници претраживача. Овај код такође служи две друге функције:
- Када апликација преузме постове из АПИ-ја, они ће бити ускладиштени у варијабли података коју обезбеђује усеКуери кука. Ова варијабла помаже у управљању стањем апликације. Затим можете мапирати листу постова сачуваних у овој променљивој и приказати их у претраживачу.
- Да бисте додали два дугмета за навигацију, Претходно и Следеће, да бисте омогућили корисницима да постављају упите и у складу са тим прикажу додатне податке са страницама.
return (
<div>
<h2 className="header">Next.js Pagination</h2>
{data && (
<div className="card">
<ul className="post-list">
{data.map((post) => (
<li key={post.id} className="post-item">{post.title}</li>
))}
</ul>
</div>
)}
<div className="btn-container">
<button
onClick={() => setPage(prevState => Math.max(prevState - 1, 0))}
disabled={page === 1}
className="prev-button"
>Prev Page</button><button
onClick={() => setPage(prevState => prevState + 1)}
className="next-button"
>Next Page</button>
</div>
</div>
);
На крају, покрените развојни сервер.
npm run dev
Затим идите на хттп://лоцалхост:3000/Пагинатион у прегледачу.
Пошто сте укључили фасциклу Пагинатион у директоријум апликације, Нект.јс га третира као руту, омогућавајући вам да приступите страници на тој УРЛ адреси.
Бесконачно померање пружа беспрекорно искуство прегледања. Добар пример је ИоуТубе, који аутоматски преузима нове видео записе и приказује их док скролујете надоле.
УсеИнфинитеКуери кука вам омогућава да имплементирате бесконачно померање преузимањем података са сервера на страницама и аутоматским дохваћањем и приказивањем следеће странице података док се корисник помера надоле.
Да бисте применили бесконачно померање, додајте датотеку ИнфинитеСцролл/паге.јс у директоријум срц/апп. Затим извршите следеће увозе:
"use client"
import React, { useRef, useEffect, useState } from 'react';
import { useInfiniteQuery } from '@tanstack/react-query';
import './page.styles.css';
Затим креирајте Реацт функционалну компоненту. Унутар ове компоненте, слично имплементацији пагинације, направите функцију која ће дохватити податке постова.
export default function InfiniteScroll() {
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) {
throw new Error('Failed to fetch posts');
}
const data = await response.json();
await new Promise((resolve) => setTimeout(resolve, 2000));
return data;
} catch (error) {
console.error(error);
throw error;
}
};
}
За разлику од имплементације пагинације, овај код уводи кашњење од две секунде приликом преузимања података како би омогућио кориснику да истражује тренутне податке док скролује да би покренуо поновно преузимање новог скупа података.
Сада дефинишите усеИнфинитеКуери куку. Када се компонента првобитно монтира, кука ће преузети прву страницу података са сервера. Како корисник скролује надоле, кука ће аутоматски преузети следећу страницу података и приказати је у компоненти.
const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
queryKey: ['posts'],
queryFn: fetchPosts,
getNextPageParam: (lastPage, allPages) => {
if (lastPage.length < 5) {
return undefined;
}
return allPages.length + 1;
},
}); const posts = data ? data.pages.flatMap((page) => page) : [];
Променљива постови комбинује све постове са различитих страница у један низ, што резултира спљоштеном верзијом променљиве података. Ово вам омогућава лако мапирање и приказивање појединачних постова.
Да бисте пратили померање корисника и учитавали више података када је корисник близу дна листе, можете дефинисати функцију која користи Интерсецтион Обсервер АПИ да открије када се елементи укрштају са оквиром за приказ.
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]);
На крају, укључите ЈСКС елементе за постове који се приказују у претраживачу.
return (
<div>
<h2 className="header">Infinite Scroll</h2>
<ul ref={listRef} className="post-list">
{posts.map((post) => (
<li key={post.id} className="post-item">
{post.title}
</li>
))}
</ul>
<div className="loading-indicator">
{isFetching ? 'Fetching...' : isLoadingMore ? 'Loading more...' : null}
</div>
</div>
);
Када извршите све промене, посетите хттп://лоцалхост:3000/ИнфинитеСцролл да бисте их видели у акцији.
ТанСтацк упит: Више од самог преузимања података
Пагинација и бесконачно померање су добри примери који истичу могућности ТанСтацк Куерија. Једноставно речено, то је свеобухватна библиотека за управљање подацима.
Са својим широким скупом функција, можете да поједноставите процесе управљања подацима своје апликације, укључујући ефикасно руковање стањем. Поред других задатака у вези са подацима, можете побољшати укупне перформансе својих веб апликација, као и корисничко искуство.