Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

SWR (state-while-validate) yra duomenų gavimo metodas, sukurtas Vercel. Jis veikia pirmiausia nusiunčiant duomenis, išsiunčiant užklausą dėl pakartotinio patvirtinimo, tada grąžinant atnaujintus duomenis.

SWR yra labai galingas, nes leidžia ne tik gauti pakartotinai naudojamus duomenis, bet ir turi integruotą talpyklą, puslapių rūšiavimą ir pakartotinį patvirtinimą. Naudojant SWR, svetainė rodo talpyklos turinį, o fone gauna naujausią turinį.

Kaip veikia SWR?

Paprastai jūs gauti duomenis naudodami „Axios“ arba gavimo metodą. Šie metodai prisijungia prie duomenų šaltinio, nuskaito ir grąžina duomenis, tada uždarykite ryšį. Tačiau SWR duomenis gauna skirtingai. Jis veikia trimis etapais:

  1. Grąžina pasenusius duomenis iš talpyklos.
  2. Siunčia užklausą gauti iš naujo duomenis.
  3. Grąžina naujausius duomenis.

SWR nepakeičia gavimo API. Vietoj to, jis leidžia pateikti talpykloje saugomą turinį svetainėje, kai tik vartotojas apsilanko, ir atnaujinti turinį, kai jis pasensta.

instagram viewer

Taigi, kaip SWR žino, kada talpykla negalioja? Per talpyklos valdymo antraštės atsaką. Atsakymas turi dvi būsenas: šviežią ir pasenusią. Nauja būsena reiškia, kad talpyklą galima naudoti pakartotinai, o pasenusi būsena reiškia, kad ji negalioja. Nurodykite atsakymo galiojimo laiką maksimalaus amžiaus direktyvoje.

SWR laiko bet kokį talpykloje esantį atsakymą, senesnį nei maksimalus amžius, negaliojančiu. Kai programa pateiks pasenusius talpykloje saugomus duomenis, SWR juos patvirtins iš naujo ir pateiks naujus duomenis, kuriuos galėsite naudoti puslapiui atnaujinti.

Kaip gauti duomenis Next.js naudojant SWR

Pradėkite naudoti SWR programoje „React“, pirmiausia ją įdiegdami per paketų tvarkyklę. Ši komanda naudoja npm.

npm diegti swr\n

Komponento faile importuokite useSWR kabliuką iš swr.

importuoti naudoti SWR iš"swr"\n

UseSWR kabliukas priima du argumentus:

  1. Unikalus duomenų identifikatorius. Paprastai API URL.
  2. Paėmimo funkcija. Tai funkcija, naudojama duomenims gauti. Jis gali naudoti gavimo, „Axios“ ar kitus duomenų gavimo įrankius.

Kabliukas grąžina duomenis ir klaidos objektą. Įsitikinkite, kad jums naudokite šį kabliuką pagal geriausią praktiką.

Štai pavyzdys, rodantis, kaip naudoti useSWR kabliuką.

konst atnešėjas = (...args) => gauti(...args).tada(res => res.json());\nconst {duomenys, klaida} = useSWR("/api/data", atnešėjas);\n

Duomenis galite pateikti tokiu komponentu, kaip šis:

importuoti naudoti SWR iš"swr"\nFunkcija Pagrindinis () {\n konst atnešėjas = (...args) => gauti(...args).tada(res => res.json());\n konst {duomenys, klaida} = useSWR("/api/data", atnešėjas);\n jeigu (klaida) grąžinti<div>nepavyko užkrautidiv>\n jeigu (!duomenys) grąžinti<div>įkeliama...div>\n grąžinti<div>{duomenys}div>\n}\n

Tai paprastas SWR įgyvendinimas. The SWR dokumentai eikite nuodugniau, todėl patikrinkite juos ir sužinokite daugiau.

Kodėl naudoti SWR?

SWR turi daug pranašumų, palyginti su kitais duomenų gavimo metodais.

Talpykla

Naudodami tradicinius duomenų gavimo metodus, turite naudoti suktuką arba įkėlimo pranešimą, kad pagerintumėte naudotojo patirtį, kai programa gauna duomenis.

SWR leidžia vartotojui rodyti pasenusius duomenis, kol juos patvirtinate iš naujo. Tai reiškia, kad vartotojui nereikia laukti, kol gavimo priemonė grąžins duomenis.

Pakartotinis patvirtinimas

Pakartotinai patvirtinus SWR talpykloje saugomus duomenis vėl atnaujina, o puslapis iš naujo pateikiamas su naujausiais duomenimis. Pakartotinis patvirtinimas ypač svarbus svetainėms, kurių turinys reguliariai keičiasi.

Puslapiai

The naudokite SWRInfinite kabliuką iš SWR leidžia lengvai įdiegti puslapių puslapius arba net sukurti begalinę įkėlimo vartotojo sąsają.

SWR leidžia vartotojui grįžti į slinkties poziciją puslapyje, kai jis grįžta į jį. Tai prisideda prie geresnės vartotojo patirties.

Priklausomas duomenų gavimas

Galite gauti duomenis, kurie priklauso nuo kitų duomenų. Tai leidžia iš vienos užklausos grąžintus duomenis panaudoti kitoje užklausoje.

Naudokite SWR, kad pagerintumėte naudojimą

SWR yra duomenų gavimo įrankis su automatinio pakartotinio patvirtinimo funkcija, kuri padeda programoms pateikti talpyklos turinį laukiant atnaujinto turinio. Vartotojai gali iš karto užsiimti turiniu, o ne laukti, kol serveris grąžins duomenis.

SWR taip pat padeda kurti puslapius, begalinį įkėlimą, slinkties padėties atkūrimą ir kitas sudėtingas funkcijas. Jei gaunate duomenis, kuriuos reikia reguliariai atnaujinti, tikrai turėtumėte apsvarstyti galimybę juos naudoti.