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

Извлечение данных — важная функция, которая позволяет разработчикам извлекать и отображать данные на веб-сайте/веб-приложении. Существует несколько различных способов получения данных в Next.js, каждый со своими преимуществами и вариантами использования. В этой статье будут рассмотрены различные способы получения данных в Next.js.

Использование хука useEffect для извлечения данных

использованиеЭффект крючок - это Хук React, используемый для выполнения побочных эффектов, например вызовы API в компонентах. Вы можете использовать хук useEffect для получения данных в Next.js.

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

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

Например:

Импортировать { useEffect, useState } от«реагировать»;
экспортпо умолчаниюфункцияДом() {
константа [данные, setData] = useState("");
 использоватьЭффект(() => {
 принести(' https://api.example.com/data');
 .затем( (ответ) => ответ.json())
 .затем( (данные) => setData (данные))
 }, []); 
возвращаться (


 {данные.имя}
 </div>
 )
}

Этот блок кода использует хук useEffect для получения данных из API. If передает два параметра хуку useEffect: функцию для получения данных и массив зависимостей. В случае успеха он использует установитьДанные() для обновления состояния компонента с данными, возвращаемыми запросом на выборку.

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

Обработка автоматической повторной проверки с использованием SWR

КСВ (stale-while-revalidate) — это библиотека хуков React для обработки выборки данных. Вы должны настроить библиотеку SWR во-первых, чтобы использовать его в своем приложении Next.

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

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

Чтобы запретить библиотеке SWR выполнять это действие, вы можете использовать команду revalidateOnFocus вариант.

Вот так:

константа { данные, ошибка, isLoading } = useSWR(' https://api.example.com/data', сборщик, {
 перепроверить в фокусе: ЛОЖЬ,
})

Установка для свойства revalidateOnFocus значения false гарантирует, что библиотека SWR не будет перепроверять ваши данные каждый раз, когда вы снова фокусируетесь на странице.

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

Чтобы отключить действие, вы можете использовать revalidateOnReconnect вариант:

константа { данные, ошибка, isLoading } = useSWR(' https://api.example.com/data', сборщик, {
 повторная проверка при повторном подключении: ЛОЖЬ,
})

Чтобы отключить автоматическую повторную проверку данных, задайте для свойств revalidateOnFocus и revalidateOnReccconect значение false.

Использование библиотеки Isomorphic-Unfetch для выполнения запросов на выборку

изоморфный-unfetch library — это небольшая облегченная библиотека, которая может выполнять запросы на выборку в приложении Next.js. Библиотека является отличной альтернативой нативной принести API. Он прост в использовании, что делает его идеальным для разработчиков, которые только начинают делать запросы на выборку.

Вы можете использовать isomorphic-unfetch в качестве полифилла для старых браузеров, которые не поддерживают собственный API-интерфейс выборки. Библиотека isomorphic-unfetch минималистична и подходит для работы с небольшими приложениями.

Чтобы использовать isomorphic-unfetch в приложении Next.js, установите библиотеку, выполнив следующую команду:

npm установить isomorphic-unfetch

Затем вы можете импортировать библиотеку и использовать ее в своем компоненте для получения данных, например:

Импортировать Принести от'изоморфная невыборка'
Импортировать {useState, useEffect} от«реагировать»
экспортпо умолчаниюфункцияДом() {
константа [данные, setData] = useState(нулевой)
 использоватьЭффект(() => {
 Принести(' https://api.example.com/data')
 .затем( (ответ) => ответ.json)
 .затем( (данные) => setData (данные))
 }, [])

если (!данные) возвращаться<див>Загрузка...див>
возвращаться (


{данные.имя}</h1>
 </div>
 )
}

Функция isomorphic-unfetch работает как на стороне клиента, так и на стороне сервера.

Эффективная выборка данных с помощью Next.js

Выборка данных — важная функция при разработке приложений. Next.js предоставляет несколько способов получения данных, каждый из которых имеет свои преимущества и недостатки.

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