Как реализовать бесконечную прокрутку и нумерацию страниц с помощью Next.js и TanStack Query

Большинству разрабатываемых вами приложений потребуется управление данными. Поскольку программы продолжают масштабироваться, объем данных, которыми необходимо управлять, увеличивается. Когда приложение не может эффективно управлять данными, оно работает плохо.

Пейджинг и бесконечная прокрутка — два популярных метода, которые можно использовать для оптимизации производительности приложений. Они могут помочь вам более эффективно обрабатывать существующие данные и улучшить общее качество обслуживания пользователей.

Пагинация и бесконечная прокрутка с помощью TanStack Query

TanStack Query — адаптация React Query — мощная библиотека управления состоянием для приложений JavaScript. Он обеспечивает эффективное решение для управления состоянием приложения, а также других функций, включая задачи, связанные с данными, такие как кэширование.

Пагинация предполагает разделение большой группы данных на небольшие страницы, что позволяет пользователям перемещаться по контенту в управляемых группах с помощью кнопок навигации. Напротив, бесконечная прокрутка обеспечивает более динамичный просмотр. По мере прокрутки пользователи автоматически загружают и отображают новые данные, устраняя необходимость в явной навигации.

Пейджинг и бесконечная прокрутка предназначены для эффективного управления большими данными и их отображения. Выбор между ними зависит от требований приложения к данным.

Настройте проект Next.js

Для начала создайте проект Next.js. Установите последнюю версию Next.js 13, которая использует папку App.

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

Затем установите пакет TanStack в проект с помощью npm, библиотеки Node.

npm я @tanstack/реагировать-запрос

Интегрируйте запрос TanStack в приложение Next.js

Чтобы интегрировать TanStack Query в ваш проект Next.js, вам необходимо создать и инициализировать новый экземпляр TanStack Query в корневом каталоге вашего приложения — файл layout.js. Для этого импортируйте QueryClient и QueryClientProvider из запроса TanStack. Затем включите дочернее свойство в QueryClientProvider следующим образом:

«использовать клиент» import React from ‘react’ import { QueryClient, QueryClientProvider } from ‘@tanstack/react-query’; const метаданные = { title: «Создать следующее приложение», описание: «Сгенерировано при создании следующего приложения», }; экспортировать функцию по умолчанию RootLayout({дети}) {const queryClient = new QueryClient(); возврат ({дети}); } экспорт {метаданные};

Этот параметр гарантирует, что запрос TanStack завершил доступ к состоянию приложения.

Реализуйте нумерацию страниц с помощью хука useQuery.

Перехватчик useQuery извлекает данные и управляет ими. Предоставляя параметры нумерации страниц, такие как нумерация страниц, вы легко получаете доступ к определенным подгруппам данных.

Кроме того, этот хук предоставляет различные параметры и конфигурации для настройки функций извлечения данных, включая настройку параметров кэша, а также эффективную обработку состояния загрузки. Благодаря этим функциям вы можете создать эффективную нумерацию страниц.

Теперь, чтобы реализовать нумерацию страниц в приложении Next.js, создайте файл Pagination/page.js в каталоге src/app. Внутри этого файла создайте следующие импорты:

«использовать клиент» import React, { useState } из «реагировать»; импортировать {useQuery} из ‘@tanstack/react-query’; импортировать ‘./page.styles.css’;

Затем определите компонент функции React. Внутри этого компонента вам необходимо определить функцию, которая извлекает данные из внешнего API. В этом случае используйте API JSONPlaceholder для получения группы сообщений.

экспортировать функцию по умолчанию Pagination() { const (page, setPage) = useState(1); const fetchPosts = async () => { try { const response = await fetch(` _page=${page}&_limit=10`); if (!response.ok) { throw new Error(‘Не удалось получить сообщения’); } Константные данные = ждут ответа.json(); возврат данных; } catch (ошибка) { console.error(ошибка); ошибка выброса; } }; // этот код сохраняется }

Теперь определите хук useQuery и определите следующие параметры как объекты:

const { isLoading, isError, error, data } = useQuery ({ KeepPreviousData: true, queryKey: (‘posts’, page), queryFn: fetchPosts, });

Значение KeepPreviousData имеет значение true , что гарантирует, что при получении новых данных приложение сохранит предыдущие данные нетронутыми. Параметр queryKey представляет собой массив, содержащий ключ для этого запроса, поэтому вы хотите получить для них данные из конечной точки и текущей страницы. Наконец, параметр queryFn, fetchPosts, запускает вызов функции для получения данных.

Как упоминалось изначально, этот крючок предоставляет ряд состояний, которые вы можете открыть, аналогично тому, как вы деконструируете массивы и объекты, а затем используете их для улучшения взаимодействия с пользователем (показ правильного пользовательского интерфейса) при выполнении выборки данных. К этим состояниям относятся isLoading, isError и другие.

Для этого добавьте следующий код, чтобы отображать различные экраны уведомлений в зависимости от текущего состояния выполняемого процесса:

если (isLoading) { return (

Загрузка.

); } if (isError) { return (

{сообщение об ошибке}

); }

Наконец, включите этот код для элементов JSX, которые появляются на странице браузера. Этот код также выполняет две разные функции:

1. После того, как это приложение получит сообщения из API, они будут в переменной данных, предоставленной ловушкой useQuery. Эта переменная помогает управлять состоянием приложения. Затем вы можете «сопоставить» список сообщений, хранящихся в этой переменной, а затем отобразить их в браузере.
2. Чтобы добавить две кнопки навигации, «Назад» и «Далее», они позволяют пользователям запрашивать и отображать дополнительные данные с разбивкой на страницы соответственно.

возвращаться (

Next.js Пагинация

{данные && (

{data.map((сообщение) => (

1. {Заголовок поста}

))}

)} setPage(prevState => Math.max(prevState – 1, 0))} Disabled={page === 1} className=”prev-button” >Предыдущая страница setPage(prevState => prevState + 1)} className= «кнопка «Далее» > Следующая страница);

Наконец, запустите сервер программирования.

npm run dev

Затем перейдите в браузер.

Поскольку вы включили папку Pagination в папку приложения, Next.js рассматривает ее как маршрут, позволяя вам получить доступ к странице, используя этот URL-адрес.

Бесконечная прокрутка с помощью хука useInfiniteQuery.

Бесконечная прокрутка обеспечивает удобство просмотра. YouTube — очевидный пример: он автоматически получает новые видео и показывает их при прокрутке страницы.

Хук useInfiniteQuery позволяет реализовать бесконечную прокрутку путем получения данных с сервера внутри страниц и автоматического получения и отображения следующей страницы данных, когда пользователь прокручивает страницу вниз.

Чтобы реализовать бесконечную прокрутку, добавьте файл InfiniteScroll/page.js в каталог src/app. Затем выполните следующий импорт:

«использовать клиент» import React, { useRef, useEffect, useState } из «реагировать»; импортировать { useInfiniteQuery } из ‘@tanstack/react-query’; импортировать ‘./page.styles.css’;

Затем создайте функциональный компонент React. Внутри этого компонента, аналогично нумерации страниц, создайте функцию для получения данных статьи.

экспортировать функцию по умолчанию InfiniteScroll() { const listRef = useRef(null); const (isLoadingMore, setIsLoadingMore) = useState (false); const fetchPosts = async ({pageParam = 1 }) => { try { const response = await fetch(` _page=${pageParam}&_limit=5`); if (!response.ok) { throw new Error(‘Не удалось получить сообщения’); } Константные данные = ждут ответа.json(); дождитесь нового обещания ((решить) => setTimeout(решить, 2000)); возврат данных; } catch (ошибка) { console.error(ошибка); ошибка выброса; } }; // этот код сохраняется }

В отличие от пейджинга, этот код вводит 2-секундную задержку при получении данных, чтобы пользователь мог просмотреть текущие данные во время прокрутки и вызвать повторную выборку нового набора данных.

Теперь определите хук useInfiniteQuery. При монтировании исходного компонента этот хук получит первую страницу данных с сервера. Когда пользователь прокручивает страницу вниз, этот хук автоматически извлекает следующую страницу данных и отображает ее в этом элементе.

const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({ queryKey: (‘posts’), queryFn: fetchPosts, getNextPageParam: (lastPage, allPages) => { if (lastPage.length page): ();

Переменная messages объединяет все публикации с разных страниц в один массив, предоставляя упрощенную версию переменной данных. Это позволяет вам легко сопоставлять и отображать отдельные публикации.

Чтобы отслеживать прокрутку пользователя и загружать дополнительные данные по мере того, как пользователь приближается к нижней части списка, вы можете определить функцию, которая использует API Intersection Observer API для определения момента пересечения элементов кадра.

const handleIntersection = (entries) => { if (entries(0).isIntersecting && hasNextPage && !isFetching && !isLoadingMore) { setIsLoadingMore(true); выборкаСледующаяСтраница(); } }; useEffect(() => { const Observer = new IntersectionObserver(handleIntersection, { порог: 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, чтобы статья отображалась в браузере.

возвращаться (

Бесконечная прокрутка

{posts.map((сообщение) => (

1. {Заголовок поста}

))}

{Извлечение ? «Извлечение». : isLoadingMore ? «Загружаю еще». : нулевой} );

После того, как вы внесли все необходимые изменения, перейдите по ссылке, чтобы увидеть их в действии.

Готово! Надеюсь, статья окажется для вас полезной.

В приведенной выше статье вы познакомились с «Как реализовать бесконечную прокрутку и нумерацию страниц с помощью Next.js и TanStack Query». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!