Next.js е стабилна рамка, която позволява на разработчиците бързо да изграждат изобразени от страна на сървъра React приложения. Има различни съществени характеристики. Една от основните му характеристики е способността му лесно да извлича данни и да ги прави лесно достъпни за компонентите.

Извличането на данни е основна функция, която позволява на разработчиците да извличат и показват данни в уебсайт/уеб приложение. Има няколко различни начина за извличане на данни в Next.js, всеки със своите предимства и случаи на използване. Тази статия ще изследва различни начини за извличане на данни в Next.js.

Използване на useEffect Hook за извличане на данни

The useEffect куката е a React кука, използвана за извършване на странични ефекти, като API извиквания в компоненти. Можете да използвате куката useEffect, за да извлечете данни в Next.js.

Тази кука е полезна за страници, които се нуждаят от динамични данни, като страници с потребителски профили, които показват информация конкретно за потребителя, който е влязъл.

За да използвате куката useEffect, първо я импортирате в избрания от вас компонент, извличате данните и изобразявате страницата си, като я използвате.

Например:

импортиране {useEffect, useState} от"реагира";
износпо подразбиранефункцияУ дома() {
конст [данни, setData] = useState("");
 useEffect(() => {
 извличане (' https://api.example.com/data');
 .тогава( (отговор) => response.json())
 .тогава( (данни) => setData (данни))
 }, []); 
връщане (


 {data.name}
 </div>
 )
}

Този кодов блок използва куката useEffect за извличане на данни от API. If предава два параметъра на куката useEffect: функция за извличане на данните и масив от зависимости. При успех се използва setData() за актуализиране на състоянието на компонента с данните, които връща заявката за извличане.

Масивът на зависимостите, който предавате на куката useEffect, трябва да съдържа стойността, от която зависи ефектът. Компонентът ще изпълни повторно ефекта само когато стойността в масива на зависимостите се промени. Ако масивът на зависимостите е празен - както в този пример - ефектът ще се изпълнява само при първото изобразяване.

Обработване на автоматично презаверяване с помощта на SWR

The КСВ (stale-while-revalidate) библиотека е React hook библиотека за обработка на извличане на данни. Ти трябва настройте библиотеката SWR първо, за да го използвате във вашето следващо приложение.

Една от ключовите характеристики на библиотеката SWR е нейната способност да автоматизира повторното валидиране на данните. Тази функция е от съществено значение, когато данните се актуализират често и трябва да бъдат постоянно актуални. Тази функционалност гарантира, че вашето приложение винаги има достъп до най-актуалните данни, което го прави по-динамично и отзивчиво към вашите потребители.

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

За да спрете SWR библиотеката да извършва това действие, можете да използвате revalidateOnFocus опция.

Така:

конст {данни, грешка, isLoading} = useSWR(' https://api.example.com/data', fetcher, {
 revalidateOnFocus: невярно,
})

Задаването на свойството revalidateOnFocus на false ще гарантира, че SWR библиотеката няма да проверява повторно вашите данни всеки път, когато префокусирате върху страницата.

Библиотеката SWR също проверява отново данните, когато потребител се свърже отново с интернет. Това действие може да бъде много полезно в определени ситуации и работи автоматично.

За да деактивирате действието, можете да използвате revalidateOnReconnect опция:

конст {данни, грешка, isLoading} = useSWR(' https://api.example.com/data', fetcher, {
 revalidateOnReconnect: невярно,
})

За да деактивирате автоматичното повторно потвърждаване на вашите данни, задайте свойствата revalidateOnFocus и revalidateOnRecconect на false.

Използване на библиотеката Isomorphic-Unfetch за изпълнение на заявки за извличане

The изоморфен-извличане библиотека е малка, лека библиотека, която може да изпълнява заявки за извличане в приложение Next.js. Библиотеката е отлична алтернатива на родната извличам API. Той е лесен за използване, което го прави идеален за разработчици, които са нови в правенето на заявки за извличане.

Можете да използвате isomorphic-unfetch като polyfill за по-стари браузъри, които не поддържат собствения API за извличане. Библиотеката isomorphic-unfetch е минималистична и подходяща за работа с малки приложения.

За да използвате isomorphic-unfetch в приложение Next.js, инсталирайте библиотеката, като изпълните следната команда:

npm инсталира изоморфно-извличане

След това можете да импортирате библиотеката и да я използвате във вашия компонент за извличане на данни, като това:

импортиране Извличане от'isomorphic-unfetch'
импортиране {useState, useEffect} от"реагира"
износпо подразбиранефункцияУ дома() {
конст [данни, setData] = useState(нула)
 useEffect(() => {
 Извличане (' https://api.example.com/data')
 .тогава( (отговор) => response.json)
 .тогава( (данни) => setData (данни))
 }, [])

ако (!данни) връщане<див>Зареждане...див>
връщане (


{data.name}</h1>
 </div>
 )
}

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

Ефективно извличане на данни с Next.js

Извличането на данни е важна функция при разработването на приложения. Next.js предоставя няколко начина за извличане на данни, всеки от които има своите предимства и компромиси.

Когато решавате какъв метод да използвате, помислете за компромисите и се уверете, че използвате техника, която ви харесва.