Next.js ir spēcīgs ietvars, kas ļauj izstrādātājiem ātri izveidot servera pusē renderētas React lietojumprogrammas. Tam ir dažādas būtiskas funkcijas. Viena no tās galvenajām iezīmēm ir spēja viegli iegūt datus un padarīt tos viegli pieejamus komponentiem.

Datu ienešana ir būtiska funkcija, kas ļauj izstrādātājiem izgūt un parādīt datus vietnē/tīmekļa lietojumprogrammā. Ir daži dažādi veidi, kā iegūt datus pakalpojumā Next.js, un katram ir savas priekšrocības un lietošanas gadījumi. Šajā rakstā tiks apskatīti dažādi veidi, kā iegūt datus vietnē Next.js.

UseEffect Hook izmantošana datu ienešanai

The useEffect āķis ir a Reakcijas āķis, ko izmanto blakusparādību veikšanai, piemēram, API izsaukumi komponentos. Varat izmantot āķi useEffect, lai ielādētu datus vietnē Next.js.

Šis āķis ir noderīgs lapām, kurām nepieciešami dinamiski dati, piemēram, lietotāja profila lapām, kurās tiek rādīta informācija par konkrētu lietotāju, kurš ir pieteicies.

Lai izmantotu useEffect āķi, vispirms importējiet to izvēlētajā komponentā, iegūstiet datus un atveidojiet lapu, izmantojot to.

Piemēram:

imports { useEffect, useState } no'reaģēt';
eksportētnoklusējumafunkcijuMājas() {
konst [dati, setData] = useState("");
 useEffect(() => {
 atnest(' https://api.example.com/data');
 .hen( (atbildi) => response.json() )
 .hen( (datus) => setData (dati) )
 }, []); 
atgriezties (


 {data.name}
 </div>
 )
}

Šis koda bloks izmanto āķi useEffect, lai iegūtu datus no API. If nodod divus parametrus useEffect āķim: funkciju datu iegūšanai un atkarības masīvu. Par panākumiem, tas izmanto setData() lai atjauninātu komponenta stāvokli ar datiem, ko atgriež ieneses pieprasījums.

Atkarības masīvā, kuru nododat āķim useEffect, ir jāietver vērtība, no kuras ir atkarīgs efekts. Komponents atkārtoti palaidīs efektu tikai tad, kad mainīsies vērtība atkarības masīvā. Ja atkarības masīvs ir tukšs (kā šajā piemērā), efekts darbosies tikai pirmajā renderēšanā.

Automātiskās atkārtotas apstiprināšanas apstrāde, izmantojot SWR

The SWR (Stale-while-revalidate) bibliotēka ir React hook bibliotēka datu ienešanas apstrādei. Tev vajag izveidot SWR bibliotēku pirmkārt, lai to izmantotu nākamajā lietojumprogrammā.

Viena no SWR bibliotēkas galvenajām funkcijām ir tās spēja automatizēt datu atkārtotu apstiprināšanu. Šī funkcija ir būtiska, ja dati tiek bieži atjaunināti un jums ir nepieciešams, lai tas būtu pastāvīgi atjaunināts. Šī funkcionalitāte nodrošina, ka jūsu lietojumprogrammai vienmēr ir piekļuve jaunākajiem datiem, padarot to dinamiskāku un atsaucīgāku jūsu lietotājiem.

SWR bibliotēka veic jaunu izgūšanas pieprasījumu API, kad lietotājs atkārtoti koncentrējas uz lapu vai pārslēdzas starp cilnēm. Kad lietotājs atstāj lapu, ekrānā redzamie dati kļūst novecojuši. Kad viņi atgriežas lapā, SWR bibliotēka nosūta API jaunu ielādes pieprasījumu un salīdzina jaunos datus ar novecojušiem datiem, lai noteiktu, vai tie ir mainījušies.

Lai neļautu SWR bibliotēkai veikt šo darbību, varat izmantot revalidateOnFocus opciju.

Tā kā:

konst {dati, kļūda, tiek ielādēts} = useSWR(' https://api.example.com/data', ienesējs, {
 revalidateOnFocus: viltus,
})

Iestatot revalidateOnFocus rekvizītu uz false, tiks nodrošināts, ka SWR bibliotēka nepārbaudīs jūsu datus katru reizi, kad atkārtoti fokusēsities uz lapu.

SWR bibliotēka arī atkārtoti apstiprina datus ikreiz, kad lietotājs atkārtoti izveido savienojumu ar internetu. Šī darbība var būt ļoti noderīga noteiktās situācijās un darbojas automātiski.

Lai atspējotu darbību, varat izmantot revalidateOnReconnect variants:

konst {dati, kļūda, tiek ielādēts} = useSWR(' https://api.example.com/data', ienesējs, {
 revalidateOnReconnect: viltus,
})

Lai atspējotu automātisku datu atkārtotu validāciju, iestatiet gan revalidateOnFocus, gan revalidateOnRecconect rekvizītus uz false.

Izomorfās atneses bibliotēkas izmantošana, lai izpildītu ieneses pieprasījumus

The izomorfs-atņemt bibliotēka ir maza, viegla bibliotēka, kas var izpildīt izgūšanas pieprasījumus lietojumprogrammā Next.js. Bibliotēka ir lieliska alternatīva dzimtajai vietai atnest API. Tas ir vienkārši lietojams, tāpēc tas ir lieliski piemērots izstrādātājiem, kuri nav sākuši veikt ieneses pieprasījumus.

Varat izmantot izomorfo un ieneses funkciju kā polifili vecākām pārlūkprogrammām, kas neatbalsta vietējo ielādes API. Izomorfā un atgūšanas bibliotēka ir minimālistiska un piemērota darbam ar nelielām lietojumprogrammām.

Lai lietotnē Next.js izmantotu isomorphic-unfetch, instalējiet bibliotēku, izpildot šādu komandu:

npm instalēt isomorphic-unfetch

Pēc tam varat importēt bibliotēku un izmantot to savā komponentā, lai iegūtu datus, piemēram:

imports Atnest no'izomorfs-unfetch'
imports {useState, useEffect} no'reaģēt'
eksportētnoklusējumafunkcijuMājas() {
konst [dati, setData] = useState(null)
 useEffect(() => {
 Atnest(' https://api.example.com/data')
 .hen( (atbildi) => response.json)
 .hen( (datus) => setData (dati) )
 }, [])

ja (!dati) atgriezties<div>Notiek ielāde...div>
atgriezties (


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

Izomorfā atgūšanas funkcija darbojas gan klienta, gan servera pusē.

Efektīva datu iegūšana, izmantojot Next.js

Datu ielāde ir svarīga funkcija, izstrādājot lietojumprogrammas. Next.js nodrošina vairākus datu iegūšanas veidus, no kuriem katram ir savas priekšrocības un kompromisi.

Lemjot par izmantojamo metodi, apsveriet kompromisus un pārliecinieties, ka izmantojat tehniku, kas jums patīk.