Користите ове технике да креирате употребљиве интерфејсе за навигацију скуповима података.

Већина апликација које ћете развити управљаће подацима; како програми настављају да се повећавају, може их бити све већа количина. Када апликације не успеју да ефикасно управљају великим количинама података, оне раде лоше.

Пагинација и бесконачно померање су две популарне технике које можете да користите за оптимизацију перформанси апликације. Они вам могу помоћи да ефикасније управљате приказивањем података и побољшају целокупно корисничко искуство.

Пагинација и бесконачно померање помоћу ТанСтацк упита

ТанСтацк Куери—адаптација Реацт Куери-а — је робусна библиотека за управљање стањем за ЈаваСцрипт апликације. Нуди ефикасно решење за управљање стањем апликације, између осталих функционалности, укључујући задатке у вези са подацима као што је кеширање.

Пагинација укључује поделу великог скупа података на мање странице, омогућавајући корисницима да се крећу по садржају у деловима којима се може управљати помоћу дугмади за навигацију. Насупрот томе, бесконачно померање пружа динамичније искуство прегледања. Како корисник скролује, нови подаци се аутоматски учитавају и приказују, елиминишући потребу за експлицитном навигацијом.

instagram viewer

Пагинација и бесконачно померање имају за циљ ефикасно управљање и представљање великих количина података. Избор између ова два зависи од захтева за подацима апликације.

Овде можете пронаћи код овог пројекта ГитХуб репозиторијум.

Подешавање пројекта Нект.јс

Да бисте започели, направите Нект.јс пројекат. Инсталирајте најновија верзија Нект.јс 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',
};


exportdefaultfunctionRootLayout({ children }) {
const queryClient = new QueryClient();


return (
"en">



 {children}
 </QueryClientProvider>
 </body>
 </html>
 );
}
export { metadata };

Ово подешавање осигурава да ТанСтацк Куери има потпун приступ стању апликације.

Имплементирајте пагинацију користећи усеКуери Хоок

Тхе усеКуери кука поједностављује дохваћање и управљање подацима. Обезбеђивањем параметара пагинације, као што су бројеви страница, можете лако да преузмете одређене подскупове података.

Поред тога, кука пружа различите опције и конфигурације за прилагођавање ваше функционалности преузимања података, укључујући подешавање опција кеша, као и ефикасно руковање стањима учитавања. Са овим функцијама можете без напора да креирате беспрекорно искуство пагинације.

Сада, да бисте применили пагинацију у апликацији Нект.јс, креирајте а Пагинација/страница.јс фајл у срц/апп именик. Унутар ове датотеке направите следеће увозе:

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

Затим дефинишите Реацт функционалну компоненту. Унутар ове компоненте, потребно је да дефинишете функцију која ће преузимати податке из спољног АПИ-ја. У овом случају користите ЈСОНПлацехолдер АПИ да преузмете скуп постова.

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
}

Сада дефинишите усеКуери куку и наведите следеће параметре као објекте:

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

Тхе кеепПревиоусДата вредност је истина, што осигурава да, док преузима нове податке, апликација чува претходне податке. Тхе куериКеи параметар је низ који садржи кључ за упит, у овом случају, крајњу тачку и тренутну страницу за коју желите да преузмете податке. Најзад, куериФн параметар, фетцхПостс, покреће позив функције за преузимање података.

Као што је раније поменуто, кука пружа неколико стања која можете распаковати, слично као што бисте то учинили деструктурирати низове и објекте, и користити их за побољшање корисничког искуства (приказивање одговарајућих корисничких интерфејса) током процеса преузимања података. Ове државе укључују исЛоадинг, исЕррор, и још.

Да бисте то урадили, укључите следећи код да бисте приказали различите екране порука на основу тренутног стања процеса у току:

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

На крају, укључите код за ЈСКС елементе који ће се приказати на страници претраживача. Овај код такође служи две друге функције:

  • Када апликација преузме постове из АПИ-ја, они ће бити сачувани у података променљива коју обезбеђује усеКуери кука. Ова варијабла помаже у управљању стањем апликације. Затим можете мапирати листу постова сачуваних у овој променљивој и приказати их у претраживачу.
  • Да бисте додали два дугмета за навигацију, Претходна и Следећи, да би се омогућило корисницима да постављају упите и у складу са тим прикажу додатне пагиниране податке. 
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/Пагинација у претраживачу.

Пошто сте укључили Пагинација фолдер у апликација директоријум, Нект.јс га третира као руту, омогућавајући вам да приступите страници на тој УРЛ адреси.

Бесконачно померање пружа беспрекорно искуство прегледања. Добар пример је ИоуТубе, који аутоматски преузима нове видео записе и приказује их док скролујете надоле.

Тхе усеИнфинитеКуери хоок вам омогућава да имплементирате бесконачно померање тако што преузимате податке са сервера на страницама и аутоматски преузимате и приказујете следећу страницу података док корисник скролује надоле.

Да бисте применили бесконачно померање, додајте ан ИнфинитеСцролл/паге.јс фајл у срц/апп именик. Затим извршите следеће увозе:

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

Затим креирајте Реацт функционалну компоненту. Унутар ове компоненте, слично имплементацији пагинације, направите функцију која ће дохватити податке постова.

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
}

За разлику од имплементације пагинације, овај код уводи кашњење од две секунде при преузимању података дозволите кориснику да истражује тренутне податке док скролује да би покренуо поновно преузимање новог скупа података.

Сада дефинишите усеИнфинитеКуери куку. Када се компонента првобитно монтира, кука ће преузети прву страницу података са сервера. Како корисник скролује надоле, кука ће аутоматски преузети следећу страницу података и приказати је у компоненти.

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

Тхе постова променљива комбинује све постове са различитих страница у један низ, што резултира спљоштеном верзијом података променљива. Ово вам омогућава лако мапирање и приказивање појединачних постова.

Да бисте пратили померање корисника и учитавали више података када је корисник близу дна листе, можете да дефинишете функција која користи Интерсецтион Обсервер АПИ да открије када се елементи укрштају са виевпорт.

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 (


"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/ИнфинитеСцролл да их видим на делу.

ТанСтацк упит: Више од самог преузимања података

Пагинација и бесконачно померање су добри примери који истичу могућности ТанСтацк Куерија. Једноставно речено, то је свеобухватна библиотека за управљање подацима.

Са својим широким скупом функција, можете да поједноставите процесе управљања подацима своје апликације, укључујући ефикасно руковање стањем. Поред других задатака у вези са подацима, можете побољшати укупне перформансе својих веб апликација, као и корисничко искуство.