Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

SWR (state-while-revalidate) je metoda pridobivanja podatkov, ki jo je razvil Vercel. Deluje tako, da najprej pridobi podatke, pošlje zahtevo za pridobitev za ponovno potrditev in nato vrne posodobljene podatke.

SWR je zelo zmogljiv, saj ne omogoča le pridobivanja podatkov za večkratno uporabo, ampak ima tudi vgrajeno predpomnjenje, ostranjevanje in ponovno preverjanje v fokusu. Z uporabo SWR spletno mesto prikaže predpomnjeno vsebino, medtem ko v ozadju pridobiva posodobljeno vsebino.

Kako deluje SWR?

Običajno bi pridobivanje podatkov z uporabo Axios ali metode pridobivanja. Te metode se povežejo s podatkovnim virom, pridobijo in vrnejo podatke, nato prekinejo povezavo. Vendar SWR pridobiva podatke drugače. Deluje v treh korakih:

  1. Vrne zastarele podatke iz predpomnilnika.
  2. Pošlje zahtevo za pridobitev za ponovno potrditev podatkov.
  3. Vrne posodobljene podatke.
instagram viewer

SWR ni nadomestilo za API za pridobivanje. Namesto tega vam omogoča upodobitev predpomnjene vsebine na vašem spletnem mestu takoj, ko ga uporabnik obišče, in posodobitev te vsebine, ko postane zastarela.

Kako torej SWR ve, kdaj je predpomnilnik neveljaven? Z odgovorom glave nadzora predpomnilnika. Odziv ima dve stanji: sveže in zastarelo. Sveže stanje pomeni, da je predpomnilnik mogoče znova uporabiti, zastarelo stanje pa pomeni, da je neveljaven. V direktivi o najvišji starosti določite čas, v katerem ostane odgovor veljaven.

SWR šteje vse predpomnjene odzive, starejše od maksimalne starosti, za neveljavne. Ko vaša aplikacija upodobi zastarele predpomnjene podatke, jih bo SWR znova preveril in vrnil sveže podatke, ki jih lahko uporabite za posodobitev strani.

Kako pridobiti podatke v Next.js s SWR

Začnite uporabljati SWR v Reactu tako, da ga najprej namestite prek upravitelja paketov. Ta ukaz uporablja npm.

npm namestite swr\n

V komponentni datoteki uvozite kavelj useSWR iz swr.

uvoz uporabiteSWR od"swr"\n

Kavelj useSWR sprejme dva argumenta:

  1. Enolični identifikator za podatke. Običajno URL API-ja.
  2. Funkcija pridobivanja. To je funkcija, ki se uporablja za pridobivanje podatkov. Uporablja lahko orodja za pridobivanje podatkov, Axios ali druga orodja za pridobivanje podatkov.

Kavelj vrne podatke in objekt napake. Prepričaj se da uporabite ta kavelj v skladu z najboljšimi praksami.

Tukaj je primer, ki prikazuje uporabo kljuke useSWR.

konst prinašalec = (... args) => fetch(...args).then(res => res.json());\nconst {podatki, napaka} = useSWR("/api/podatki", prinašalec);\n

Podatke lahko upodabljate v komponenti, kot je ta:

uvoz uporabiteSWR od"swr"\ndomača stran funkcije () {\n konst prinašalec = (... args) => fetch(...args).then(res => res.json());\n konst {podatki, napaka} = useSWR("/api/podatki", prinašalec);\n če (napaka) vrnitev<div>ni uspelo naložitidiv>\n če (!podatki) vrnitev<div>nalaganje...div>\n vrnitev<div>{podatki}div>\n}\n

To je preprosta izvedba SWR. The SWR dokumenti pojdite bolj poglobljeno, zato si jih oglejte, če želite izvedeti več.

Zakaj uporabljati SWR?

SWR ima veliko prednosti pred drugimi metodami pridobivanja podatkov.

Predpomnjenje

Pri tradicionalnih metodah pridobivanja podatkov morate uporabiti vrtljivko ali sporočilo o nalaganju, da izboljšate uporabniško izkušnjo, ko aplikacija pridobiva podatke.

SWR vam omogoča prikaz zastarelih podatkov uporabniku, medtem ko jih ponovno preverjate. To pomeni, da uporabniku ni treba čakati, da prinašalec vrne podatke.

Ponovna validacija

S ponovnim preverjanjem SWR poskrbi, da so predpomnjeni podatki spet sveži in stran se ponovno upodobi s posodobljenimi podatki. Ponovna potrditev je še posebej pomembna za strani, katerih vsebina se redno spreminja.

Paginacija

The useSWRIInfinite hook iz SWR vam omogoča preprosto izvajanje paginacije ali celo ustvarjanje uporabniškega vmesnika za neskončno nalaganje.

SWR omogoča uporabniku, da se vrne v položaj drsenja na strani, ko se vrne nanjo. To prispeva k boljši uporabniški izkušnji.

Odvisno pridobivanje podatkov

Pridobite lahko podatke, ki so odvisni od drugih podatkov. Omogoča vam uporabo podatkov, vrnjenih iz ene zahteve, v drugi zahtevi.

Uporabite SWR za izboljšanje uporabnosti

SWR je orodje za pridobivanje podatkov s funkcijo samodejnega preverjanja, ki aplikacijam pomaga upodabljati predpomnjeno vsebino, medtem ko čakajo na posodobljeno vsebino. Uporabniki se lahko z vsebino ukvarjajo takoj, namesto da čakajo na strežniku, da vrne podatke.

SWR vam pomaga tudi ustvariti paginacijo, neskončno nalaganje, obnovitev položaja drsenja in druge kompleksne funkcije. Če pridobivate podatke, ki potrebujejo redne posodobitve, vsekakor razmislite o njihovi uporabi.