Next.js je robusten okvir, ki razvijalcem omogoča hitro izdelavo aplikacij React, upodobljenih na strani strežnika. Ima različne bistvene lastnosti. Ena njegovih ključnih lastnosti je zmožnost enostavnega pridobivanja podatkov in omogočanja, da so takoj na voljo komponentam.

Pridobivanje podatkov je bistvena funkcija, ki razvijalcem omogoča pridobivanje in prikaz podatkov na spletnem mestu/spletni aplikaciji. Obstaja nekaj različnih načinov pridobivanja podatkov v Next.js, vsak s svojimi prednostmi in primeri uporabe. Ta članek bo raziskal različne načine pridobivanja podatkov v Next.js.

Uporaba useEffect Hook za pridobivanje podatkov

The useEffect kavelj je a React Hook, ki se uporablja za izvajanje stranskih učinkov, kot so klici API v komponentah. Za pridobitev podatkov v Next.js lahko uporabite kavelj useEffect.

Ta kavelj je koristen za strani, ki potrebujejo dinamične podatke, kot so strani s profilom uporabnika, ki prikazujejo informacije posebej za prijavljenega uporabnika.

Če želite uporabiti kljuko useEffect, jo najprej uvozite v svojo izbrano komponento, pridobite podatke in z njo upodobite svojo stran.

Na primer:

uvoz {useEffect, useState} od'reagirati';
izvozprivzetofunkcijodomov() {
konst [podatki, setData] = useState("");
 useEffect(() => {
 prinesi (' https://api.example.com/data');
 .potem( (odgovor) => response.json())
 .potem( (podatke) => setData (podatki) )
 }, []); 
vrnitev (


 {data.name}
 </div>
 )
}

Ta blok kode uporablja kljuko useEffect za pridobivanje podatkov iz API-ja. If posreduje dva parametra kavlju useEffect: funkcijo za pridobivanje podatkov in matriko odvisnosti. Ob uspehu uporablja setData() da posodobite stanje komponente s podatki, ki jih vrne zahteva za pridobivanje.

Matrika odvisnosti, ki jo posredujete kavlju useEffect, mora vsebovati vrednost, od katere je odvisen učinek. Komponenta bo znova zagnala učinek samo, ko se spremeni vrednost v nizu odvisnosti. Če je matrika odvisnosti prazna – kot v tem primeru – se bo učinek izvajal samo pri prvem upodabljanju.

Ravnanje s samodejno ponovno validacijo z uporabo SWR

The JZV (stale-while-revalidate) knjižnica je knjižnica kavljev React za obdelavo pridobivanja podatkov. Moraš nastavite knjižnico SWR najprej, da ga uporabite v svoji naslednji aplikaciji.

Ena od ključnih lastnosti knjižnice SWR je njena zmožnost avtomatiziranja ponovne validacije podatkov. Ta funkcija je bistvena, ko se podatki pogosto posodabljajo in potrebujete, da so vedno posodobljeni. Ta funkcionalnost zagotavlja, da ima vaša aplikacija vedno dostop do najnovejših podatkov, zaradi česar je bolj dinamična in odzivna na vaše uporabnike.

Knjižnica SWR pošlje novo zahtevo za pridobivanje API-ju, ko se uporabnik ponovno osredotoči na stran ali preklaplja med zavihki. Ko uporabnik zapusti stran, podatki, prikazani na zaslonu, postanejo zastareli. Ko se vrnejo na stran, knjižnica SWR pošlje novo zahtevo za pridobivanje API-ju in primerja nove podatke z zastarelimi podatki, da ugotovi, ali so se spremenili.

Če želite knjižnici SWR preprečiti izvajanje tega dejanja, lahko uporabite revalidateOnFocus možnost.

takole:

konst { podatki, napaka, isLoading } = useSWR(' https://api.example.com/data', prinašalec, {
 revalidateOnFocus: lažno,
})

Če nastavite lastnost revalidateOnFocus na false, boste zagotovili, da knjižnica SWR ne preveri vaših podatkov vsakič, ko se znova osredotočite na stran.

Knjižnica SWR tudi znova preveri podatke, ko se uporabnik ponovno poveže z internetom. To dejanje je lahko zelo koristno v določenih situacijah in deluje samodejno.

Če želite onemogočiti dejanje, lahko uporabite revalidateOnReconnect možnost:

konst { podatki, napaka, isLoading } = useSWR(' https://api.example.com/data', prinašalec, {
 revalidateOnReconnect: lažno,
})

Če želite onemogočiti samodejno ponovno preverjanje vaših podatkov, nastavite lastnosti revalidateOnFocus in revalidateOnRecconect na false.

Uporaba knjižnice Isomorphic-Unfetch za izvajanje zahtev za pridobivanje

The izomorfno-unfetch knjižnica je majhna, lahka knjižnica, ki lahko izvaja zahteve za pridobivanje v aplikaciji Next.js. Knjižnica je odlična alternativa domači prinašati API. Je preprost za uporabo, zaradi česar je kot nalašč za razvijalce, ki šele pripravljajo zahteve za pridobivanje.

Isomorphic-unfetch lahko uporabite kot polifill za starejše brskalnike, ki ne podpirajo izvornega API-ja za pridobivanje. Knjižnica isomorphic-unfetch je minimalistična in primerna za delo na majhnih aplikacijah.

Če želite uporabiti isomorphic-unfetch v aplikaciji Next.js, namestite knjižnico tako, da zaženete naslednji ukaz:

npm namestite izomorfno-unfetch

Nato lahko uvozite knjižnico in jo uporabite v svoji komponenti za pridobivanje podatkov, kot je ta:

uvoz Prinesi od'isomorphic-unfetch'
uvoz {useState, useEffect} od'reagirati'
izvozprivzetofunkcijodomov() {
konst [podatki, setData] = useState(nič)
 useEffect(() => {
 Prinesi (' https://api.example.com/data')
 .potem( (odgovor) => response.json)
 .potem( (podatke) => setData (podatki) )
 }, [])

če (!podatki) vrnitev<div>Nalaganje...div>
vrnitev (


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

Funkcija isomorphic-unfetch deluje tako na strani odjemalca kot na strani strežnika.

Učinkovito pridobivanje podatkov z Next.js

Pridobivanje podatkov je pomembna funkcija pri razvoju aplikacij. Next.js ponuja več načinov za pridobivanje podatkov, od katerih ima vsak svoje prednosti in kompromise.

Ko se odločate o metodi, ki jo boste uporabili, upoštevajte kompromise in zagotovite, da uporabljate tehniko, ki vam ustreza.