Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

SWR (state-while-revalidate) je metoda dohvaćanja podataka koju je napravio Vercel. Funkcionira tako da prvo dohvaća podatke, šalje zahtjev za dohvaćanje da ih ponovno potvrdi, a zatim vraća ažurirane podatke.

SWR je vrlo moćan jer ne samo da omogućuje višekratno dohvaćanje podataka, već ima i ugrađeno predmemoriju, označavanje stranica i ponovnu provjeru u fokusu. Koristeći SWR, web stranica prikazuje sadržaj u predmemoriji dok u pozadini dohvaća ažuran sadržaj.

Kako SWR radi?

Obično biste dohvaćanje podataka pomoću Axios-a ili metode dohvaćanja. Ove se metode povezuju s izvorom podataka, dohvaćaju i vraćaju podatke, a zatim zatvaraju vezu. Međutim, SWR dohvaća podatke drugačije. Djeluje u tri koraka:

  1. Vraća zastarjele podatke iz predmemorije.
  2. Šalje zahtjev za dohvaćanje za ponovnu provjeru podataka.
  3. Vraća ažurne podatke.

SWR nije zamjena za API za dohvaćanje. Umjesto toga, omogućuje vam renderiranje predmemoriranog sadržaja na vašoj web-lokaciji čim korisnik posjeti i ažuriranje tog sadržaja kada postane ustajao.

instagram viewer

Dakle, kako SWR zna kada je predmemorija nevažeća? Kroz odgovor zaglavlja kontrole predmemorije. Odgovor ima dva stanja: svježe i ustajalo. Svježe stanje znači da se predmemorija može ponovno upotrijebiti, dok ustajalo stanje znači da je nevažeća. Vi određujete vrijeme trajanja odgovora u direktivi o maksimalnoj dobi.

SWR smatra svaki odgovor u predmemoriji stariji od max-age nevažećim. Nakon što vaša aplikacija renderira stare podatke iz predmemorije, SWR će ih ponovno potvrditi i vratiti svježe podatke koje možete koristiti za ažuriranje stranice.

Kako dohvatiti podatke u Next.js pomoću SWR-a

Počnite koristiti SWR u Reactu tako da ga prvo instalirate putem upravitelja paketa. Ova naredba koristi npm.

npm instalirati swr\n

U datoteku komponente uvezite useSWR kuku iz swr.

uvoz koristiti SWR iz"swr"\n

UseSWR kuka prihvaća dva argumenta:

  1. Jedinstveni identifikator podataka. Obično URL API-ja.
  2. Funkcija dohvaćanja. Ovo je funkcija koja se koristi za dohvaćanje podataka. Može koristiti alate za dohvaćanje, Axios ili druge alate za dohvaćanje podataka.

Hook vraća podatke i objekt pogreške. Pobrinite se da koristite ovu udicu u skladu s najboljom praksom.

Ovdje je primjer koji pokazuje kako koristiti useSWR kuku.

konst donosilac = (... args) => dohvati(...args).then(res => res.json());\nconst {podaci, pogreška} = useSWR("/api/podaci", dohvaćač);\n

Podatke možete prikazati u komponenti poput ove:

uvoz koristiti SWR iz"swr"\npočetak funkcije () {\n konst donosilac = (... args) => dohvati(...args).then(res => res.json());\n konst {podaci, pogreška} = useSWR("/api/podaci", dohvaćač);\n ako (greška) povratak<div>nije uspjelo učitavanjediv>\n ako (!podaci) povratak<div>Učitavam...div>\n povratak<div>{podaci}div>\n}\n

Ovo je jednostavna implementacija SWR-a. The SWR dokumenti idite dublje pa ih provjerite da biste saznali više.

Zašto koristiti SWR?

SWR ima mnoge prednosti u odnosu na druge metode dohvaćanja podataka.

Predmemoriranje

S tradicionalnim metodama dohvaćanja podataka, morate koristiti spinner ili poruku za učitavanje kako biste poboljšali korisničko iskustvo kada aplikacija dohvaća podatke.

SWR vam omogućuje prikaz zastarjelih podataka korisniku dok ih ponovno provjeravate. To znači da korisnik ne mora čekati da dohvatač vrati podatke.

Revalidacija

Kroz ponovnu provjeru valjanosti, SWR čini predmemorirane podatke ponovno svježima i stranica se ponovno prikazuje s ažurnim podacima. Ponovna provjera je posebno važna za stranice čiji se sadržaj redovito mijenja.

Paginacija

The useSWRIInfinite kuka iz SWR-a omogućuje vam jednostavnu implementaciju paginacije ili čak stvaranje korisničkog sučelja s beskonačnim učitavanjem.

SWR omogućuje korisniku da se vrati na poziciju pomicanja na stranici kada se vrati na nju. To doprinosi boljem korisničkom iskustvu.

Ovisno dohvaćanje podataka

Možete dohvatiti podatke koji ovise o drugim podacima. Omogućuje vam korištenje podataka vraćenih iz jednog zahtjeva u drugom zahtjevu.

Koristite SWR za poboljšanje upotrebljivosti

SWR je alat za dohvaćanje podataka sa značajkom automatske ponovne provjere valjanosti koja pomaže aplikacijama prikazati predmemorirani sadržaj dok čekaju ažuran sadržaj. Korisnici mogu odmah pristupiti sadržaju umjesto da čekaju na poslužitelju da vrati podatke.

SWR vam također pomaže u kreiranju paginacije, beskonačnog učitavanja, oporavka položaja pomicanja i drugih složenih značajki. Ako dohvaćate podatke koji trebaju redovita ažuriranja, svakako biste trebali razmisliti o njihovoj upotrebi.