Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

Az SWR (state-while-revalidate) a Vercel által készített adatlekérési módszer. Úgy működik, hogy először lekéri az adatokat, lekérést küld az újraérvényesítéshez, majd visszaküldi a frissített adatokat.

Az SWR nagyon erős, mivel nem csak újrafelhasználható adatlekérést tesz lehetővé, hanem beépített gyorsítótárazással, lapozással és újraellenőrzéssel is rendelkezik. Az SWR használatával a webhely gyorsítótárazott tartalmat jelenít meg, miközben a háttérben lekéri a naprakész tartalmat.

Hogyan működik az SWR?

Normális esetben megtennéd lekérni az adatokat az Axios vagy a lekérési módszer segítségével. Ezek a módszerek csatlakoznak az adatforráshoz, lekérik és visszaadják az adatokat, majd lezárják a kapcsolatot. Az SWR azonban másként kéri le az adatokat. Három lépésben működik:

  1. Elavult adatokat ad vissza a gyorsítótárból.
  2. Lekérést küld az adatok újraellenőrzésére.
  3. Naprakész adatokat ad vissza.
instagram viewer

Az SWR nem helyettesíti a lekérési API-t. Ehelyett lehetővé teszi a gyorsítótárazott tartalom megjelenítését webhelyén, amint a felhasználó felkeresi, és frissíti a tartalmat, ha az elavulttá válik.

Tehát honnan tudja az SWR, hogy a gyorsítótár érvénytelen? A cache-control fejléc válaszán keresztül. A válasznak két állapota van: friss és elavult. A friss állapot azt jelenti, hogy a gyorsítótár újra felhasználható, míg az elavult állapot azt jelenti, hogy érvénytelen. A válasz érvényességének időtartamát a max-age direktívában adja meg.

Az SWR érvénytelennek tekinti a max-age-nél régebbi gyorsítótárazott választ. Miután az alkalmazás megjeleníti az elavult gyorsítótárazott adatokat, az SWR újraellenőrzi azokat, és friss adatokat küld vissza, amelyek segítségével frissítheti az oldalt.

Adatok lekérése a Next.js-ben SWR-rel

Kezdje el használni az SWR-t a Reactban úgy, hogy először telepíti a csomagkezelőn keresztül. Ez a parancs az npm parancsot használja.

npm telepítés swr\n

Egy összetevőfájlban importálja a useSWR hook-ot az swr-ből.

import használd az SWR-t tól től"swr"\n

A useSWR hook két argumentumot fogad el:

  1. Az adatok egyedi azonosítója. Általában az API URL.
  2. Fetcher funkció. Ez a funkció az adatok lekérésére szolgál. Használhat lekérés, Axios vagy más adatlekérő eszközöket.

A hook visszaadja az adatokat és egy hibaobjektumot. Győződjön meg róla használja ezt a horgot a legjobb gyakorlatoknak megfelelően.

Íme egy példa a useSWR horog használatára.

const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {adat, hiba} = useSWR("/api/data", lekérő);\n

Az adatokat egy ilyen összetevőben jelenítheti meg:

import használd az SWR-t tól től"swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {adat, hiba} = useSWR("/api/data", lekérő);\n ha (hiba) Visszatérés<div>nem sikerült betöltenidiv>\n ha (!adat) Visszatérés<div>Betöltés...div>\n Visszatérés<div>{adat}div>\n}\n

Ez az SWR egyszerű megvalósítása. A SWR dok menjen mélyebbre, ezért nézze meg őket, hogy többet megtudjon.

Miért érdemes SWR-t használni?

Az SWR számos előnnyel rendelkezik más adatlekérési módszerekkel szemben.

Gyorsítótárazás

A hagyományos adatlekérési módszereknél pörgetőt vagy betöltési üzenetet kell használnia a felhasználói élmény javítása érdekében, amikor az alkalmazás adatokat kér.

Az SWR lehetővé teszi az elavult adatok megjelenítését a felhasználó számára, miközben újra érvényesíti azokat. Ez azt jelenti, hogy a felhasználónak nem kell megvárnia, amíg a lekérő visszaadja az adatokat.

Újraérvényesítés

Az újraellenőrzés révén az SWR újra frissesíti a gyorsítótárazott adatokat, és az oldalt újra rendereli a naprakész adatokkal. Az újraérvényesítés különösen fontos azoknál a webhelyeknél, amelyek tartalma rendszeresen változik.

Lapszámozás

A használjon SWRInfinite horgot az SWR-ből lehetővé teszi az oldalszámozás egyszerű megvalósítását, vagy akár egy végtelen betöltésű felhasználói felület létrehozását.

Az SWR lehetővé teszi a felhasználó számára, hogy visszatérjen a görgetési pozícióba az oldalon, amikor visszatér az oldalra. Ez hozzájárul a jobb felhasználói élményhez.

Függő adatlekérés

Más adatoktól függő adatokat is lekérhet. Lehetővé teszi, hogy az egyik kérésből visszaküldött adatokat egy másik kérésben felhasználja.

Használjon SWR-t a használhatóság javítására

Az SWR egy adatlekérő eszköz automatikus újraellenőrzési funkcióval, amely segít az alkalmazásoknak a gyorsítótárazott tartalmak megjelenítésében, miközben a naprakész tartalomra várnak. A felhasználók azonnal hozzáférhetnek a tartalomhoz, ahelyett, hogy a szerveren várnának az adatok visszaadására.

Az SWR segít az oldalszámozás, a végtelen betöltés, a görgetési pozíció helyreállításában és más összetett funkciók létrehozásában is. Ha olyan adatokat kér le, amelyek rendszeres frissítésre szorulnak, mindenképpen fontolja meg azok használatát.