Next.js je robustan okvir koji programerima omogućuje brzu izradu React aplikacija prikazanih na strani poslužitelja. Ima razne bitne karakteristike. Jedna od njegovih ključnih značajki je sposobnost da lako dohvati podatke i učini ih dostupnima komponentama.

Dohvaćanje podataka ključna je značajka koja programerima omogućuje dohvaćanje i prikaz podataka na web stranici/web aplikaciji. Postoji nekoliko različitih načina za dohvaćanje podataka u Next.js, svaki sa svojim prednostima i slučajevima upotrebe. Ovaj članak će istražiti različite načine dohvaćanja podataka u Next.js.

Korištenje kuke useEffect za dohvaćanje podataka

The useEffect kuka je a React kuka koja se koristi za izvođenje nuspojava, kao što su API pozivi u komponentama. Možete koristiti kuku useEffect za dohvaćanje podataka u Next.js.

Ova kuka je korisna za stranice koje trebaju dinamičke podatke, kao što su stranice korisničkog profila koje prikazuju informacije specifične za korisnika koji je prijavljen.

Da biste koristili useEffect kuku, prvo je uvezite u svoju komponentu po izboru, dohvatite podatke i pomoću njih renderirajte svoju stranicu.

Na primjer:

uvoz {useEffect, useState} iz'reagirati';
izvozzadanofunkcijaDom() {
konst [podaci, setData] = useState("");
 useEffect(() => {
 dohvati (' https://api.example.com/data');
 .zatim( (odgovor) => response.json() )
 .zatim( (podaci) => setData (podaci) )
 }, []); 
povratak (


 {data.name}
 </div>
 )
}

Ovaj blok koda koristi kuku useEffect za dohvaćanje podataka iz API-ja. If prosljeđuje dva parametra kuki useEffect: funkciju za dohvaćanje podataka i niz ovisnosti. Na uspjeh, koristi setData() za ažuriranje stanja komponente podacima koje zahtjev za dohvaćanje vraća.

Niz ovisnosti koji prosljeđujete useEffect kuki treba sadržavati vrijednost o kojoj učinak ovisi. Komponenta će ponovno pokrenuti učinak samo kada se promijeni vrijednost u nizu ovisnosti. Ako je niz ovisnosti prazan—kao u ovom primjeru—učinak će se pokrenuti samo na prvom iscrtavanju.

Rukovanje automatskom revalidacijom pomoću SWR-a

The SWR (stale-while-revalidate) biblioteka je Reactova knjižnica za spajanje za rukovanje dohvaćanjem podataka. Ti moraš postaviti SWR knjižnicu prvo, da biste ga upotrijebili u svojoj aplikaciji Next.

Jedna od ključnih značajki SWR biblioteke je njezina sposobnost automatizacije ponovne provjere valjanosti podataka. Ova je značajka neophodna kada se podaci često ažuriraju i trebate da budu stalno ažurni. Ova funkcionalnost osigurava da vaša aplikacija uvijek ima pristup najnovijim podacima, što je čini dinamičnijom i osjetljivijom na vaše korisnike.

Knjižnica SWR šalje novi zahtjev za dohvaćanje API-ju kada se korisnik ponovno fokusira na stranicu ili prelazi s jedne kartice na drugu. Kada korisnik napusti stranicu, podaci prikazani na ekranu postaju zastarjeli. Kada se vrate na stranicu, SWR biblioteka šalje novi zahtjev za dohvaćanje API-ju i uspoređuje nove podatke sa zastarjelim podacima kako bi utvrdila jesu li se promijenili.

Kako biste zaustavili SWR knjižnicu u izvođenju ove radnje, možete koristiti revalidateOnFocus opcija.

ovako:

konst { data, error, isLoading } = useSWR(' https://api.example.com/data', dohvaćanje, {
 revalidateOnFocus: lažno,
})

Postavljanje svojstva revalidateOnFocus na false osigurat će da SWR biblioteka ne provjerava valjanost vaših podataka svaki put kada se ponovno fokusirate na stranicu.

SWR knjižnica također ponovno provjerava valjanost podataka kad god se korisnik ponovno spoji na internet. Ova radnja može biti od velike pomoći u određenim situacijama i radi automatski.

Da biste onemogućili radnju, možete koristiti revalidateOnReconnect opcija:

konst { data, error, isLoading } = useSWR(' https://api.example.com/data', dohvaćanje, {
 revalidateOnReconnect: lažno,
})

Da biste onemogućili automatsku ponovnu provjeru valjanosti svojih podataka, postavite svojstva revalidateOnFocus i revalidateOnRecconect na false.

Korištenje biblioteke Isomorphic-Unfetch za izvođenje zahtjeva za dohvaćanje

The izomorfno-odbaciti biblioteka je mala, lagana biblioteka koja može izvoditi zahtjeve za dohvaćanje u aplikaciji Next.js. Knjižnica je izvrsna alternativa zavičajnoj dohvatiti API. Jednostavan je za korištenje, što ga čini savršenim za programere koji tek počinju postavljati zahtjeve za dohvaćanje.

Isomorphic-unfetch možete koristiti kao polifill za starije preglednike koji ne podržavaju izvorni API za dohvaćanje. Isomorphic-unfetch biblioteka je minimalistična i prikladna za rad na malim aplikacijama.

Za korištenje isomorphic-unfetch u aplikaciji Next.js, instalirajte biblioteku pokretanjem sljedeće naredbe:

npm instalirajte izomorfni-unfetch

Zatim možete uvesti biblioteku i koristiti je u svojoj komponenti za dohvaćanje podataka, ovako:

uvoz Dohvati iz'isomorphic-unfetch'
uvoz {useState, useEffect} iz'reagirati'
izvozzadanofunkcijaDom() {
konst [podaci, setData] = useState(ništavan)
 useEffect(() => {
 Dohvati (' https://api.example.com/data')
 .zatim( (odgovor) => odgovor.json)
 .zatim( (podaci) => setData (podaci) )
 }, [])

ako (!podaci) povratak<div>Učitavam...div>
povratak (


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

Funkcija isomorphic-unfetch radi i na strani klijenta i na strani poslužitelja.

Učinkovito dohvaćanje podataka uz Next.js

Dohvaćanje podataka važna je značajka pri razvoju aplikacija. Next.js pruža nekoliko načina za dohvaćanje podataka, od kojih svaki ima svoje prednosti i nedostatke.

Kada odlučujete o metodi koju ćete koristiti, razmislite o kompromisima i pobrinite se da koristite tehniku ​​koja vam odgovara.