Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

SWR (state-while-revalidate) este o metodă de preluare a datelor construită de Vercel. Funcționează prin preluarea datelor mai întâi, trimițând o solicitare de preluare pentru a le revalida, apoi returnând datele actualizate.

SWR este foarte puternic, deoarece nu numai că permite preluarea datelor reutilizabile, dar are și stocarea în cache încorporată, paginarea și revalidarea la focalizare. Folosind SWR, un site web afișează conținut în cache în timp ce preia conținut actualizat în fundal.

Cum funcționează SWR?

În mod normal, ai face-o preluați datele utilizând Axios sau metoda fetch. Aceste metode se conectează la resursa de date, preiau și returnează datele, apoi închid conexiunea. Cu toate acestea, SWR preia datele în mod diferit. Funcționează în trei pași:

  1. Returnează date învechite din cache.
  2. Trimite cererea de preluare pentru a revalida datele.
  3. Returnează date actualizate.
instagram viewer

SWR nu este un înlocuitor pentru API-ul de preluare. În schimb, vă permite să redați conținutul stocat în cache pe site-ul dvs. de îndată ce utilizatorul vizitează și să actualizați acel conținut atunci când devine învechit.

Deci, de unde știe SWR când memoria cache este invalidă? Printr-un răspuns cache-control antet. Răspunsul are două stări: proaspăt și învechit. O stare proaspătă înseamnă că memoria cache poate fi reutilizată, în timp ce o stare învechită înseamnă că este invalidă. Specificați timpul în care răspunsul rămâne valabil în directiva de vârstă maximă.

SWR consideră orice răspuns din cache mai vechi decât vârsta maximă nevalid. După ce aplicația dvs. redă datele din cache învechite, SWR le va revalida și va returna date noi pe care le puteți utiliza pentru a actualiza pagina.

Cum să preluați date în Next.js cu SWR

Începeți să utilizați SWR în React instalându-l mai întâi printr-un manager de pachete. Această comandă folosește npm.

npm instalare swr\n

Într-un fișier component, importați cârligul useSWR din swr.

import utilizați SWR din"swr"\n

Cârligul useSWR acceptă două argumente:

  1. Un identificator unic pentru date. De obicei, adresa URL API.
  2. O funcție de preluare. Aceasta este funcția folosită pentru a prelua date. Poate folosi fetch, Axios sau alte instrumente de preluare a datelor.

Cârligul returnează datele și un obiect de eroare. Asigură-te că utilizați acest cârlig în conformitate cu cele mai bune practici.

Iată un exemplu care arată cum să utilizați cârligul useSWR.

const aducător = (...args) => aduce(...args).atunci(res => res.json());\nconst {date, eroare} = useSWR(„/api/data”, aducător);\n

Puteți reda datele într-o componentă astfel:

import utilizați SWR din"swr"\nfuncție Acasă () {\n const aducător = (...args) => aduce(...args).atunci(res => res.json());\n const {date, eroare} = useSWR(„/api/data”, aducător);\n dacă (eroare) întoarcere<div>incarcarea a esuatdiv>\n dacă (!date) întoarcere<div>Se încarcă...div>\n întoarcere<div>{date}div>\n}\n

Aceasta este o implementare simplă a SWR. The SWR docs aprofundați, așa că verificați-le pentru a afla mai multe.

De ce să folosiți SWR?

SWR are multe avantaje față de alte metode de preluare a datelor.

Memorarea în cache

Cu metodele tradiționale de preluare a datelor, trebuie să utilizați un mesaj de rulare sau de încărcare pentru a îmbunătăți experiența utilizatorului atunci când aplicația preia date.

SWR vă permite să afișați date învechite pentru utilizator, în timp ce le revalidați. Acest lucru înseamnă că utilizatorul nu trebuie să aștepte ca fetcherul să returneze date.

Revalidare

Prin revalidare, SWR face din nou datele din cache proaspete, iar pagina este redată din nou cu date actualizate. Revalidarea este importantă în special pentru site-urile al căror conținut se schimbă în mod regulat.

Paginare

The utilizați cârlig SWRInfinite de la SWR vă permite să implementați paginarea cu ușurință sau chiar să creați o interfață de utilizare de încărcare infinită.

SWR permite unui utilizator să revină la poziția de defilare pe o pagină atunci când revine la ea. Acest lucru contribuie la o experiență mai bună pentru utilizator.

Preluare dependentă de date

Puteți prelua date care depind de alte date. Vă permite să utilizați datele returnate de la o cerere într-o altă solicitare.

Utilizați SWR pentru a îmbunătăți gradul de utilizare

SWR este un instrument de preluare a datelor cu o caracteristică de revalidare automată care ajută aplicațiile să redă conținut în cache în timp ce așteaptă conținut actualizat. Utilizatorii se pot interacționa cu conținutul imediat, în loc să aștepte pe server să returneze datele.

SWR vă ajută, de asemenea, să creați paginare, încărcare infinită, recuperarea poziției de defilare și alte caracteristici complexe. Dacă preluați date care necesită actualizări regulate, ar trebui să vă gândiți cu siguranță să le utilizați.