SWR:n perusteet: stale-while-revalidate

SWR on lyhenne sanoista Stale-While-Revalidate, joka on RFC 5861:ssä määritelty HTTP-välimuististrategia. Strategia toimii näin: vanhentunut eli välimuistissa oleva data tarjotaan käyttäjälle välittömästi, minkä jälkeen se validoidaan uudelleen taustalla ja käyttöliittymä päivitetään tuoreen datan saapuessa.

Tässä lähestymistavassa painotetaan koettua suorituskykyä: käyttäjät näkevät datan heti sen sijaan, että joutuisivat odottamaan verkkopyynnön edestakaista matkaa.

Perinteisillä latausmalleilla käyttäjät näkevät latausympyrän jokaisella navigointikerralla. SWR:n kanssa he näkevät viimeksi tunnetun datan heti, ja käyttöliittymä päivittyy huomaamatta taustalla, jos data on muuttunut.

Tämä saa sovellukset tuntumaan huomattavasti nopeammilta ja vähentää lataustilojen aiheuttamaa kognitiivista häiriötä.

SWR validoi datan automaattisesti uudelleen, kun selainikkuna saa jälleen kohdistuksen käyttäjän vaihtaessa välilehteä ja palatessa takaisin, verkkoyhteys palautuu offline-tilan jälkeen, nimenomaista mutate()-funktiota kutsutaan tai määritettävän refreshInterval-ajastimen aika umpeutuu.

Nämä automaattiset käynnistimet pitävät datan tuoreena ilman, että kehittäjän tarvitsee hallita uudelleenhakujen logiikkaa manuaalisesti.

SWR-avain voi olla jossakin useista tiloista: loading (välimuistissa ei ole dataa ja ensimmäinen haku on käynnissä), revalidating (välimuistissa on dataa ja taustapäivitys on käynnissä), error (pyyntö epäonnistui) tai success (tuoretta dataa on saatavilla).

Näiden tilojen ymmärtäminen auttaa rakentamaan täsmälliset latausskeletonit ja virhekäyttöliittymät.

SWR ylläpitää pyynnön avaimen perusteella indeksoitua maailmanlaajuista muistissa olevaa välimuistia. Avain on yleensä URL-merkkijono. Jokainen saman avaimen pyytävä komponentti saa saman välimuistissa olevan arvon ja osallistuu samaan uudelleenvalidointisykliin.

Tämän automaattisen deduplikoinnin ansiosta 10 komponenttia voi kutsua useSWR:ää samalla avaimella, mutta verkkoon lähetetään vain yksi pyyntö.

SWR erottaa välimuistin hallintalogiikan varsinaisesta datan hausta. Määritätte fetcher-funktion, joka on async-funktio: se vastaanottaa avaimen ja palauttaa datan.

Fetcher on vaihdettavissa: käyttäkää fetchiä, axiosia, graphql-requestia tai mitä tahansa async-datalähdettä. SWR käsittelee välimuistia ja uudelleenvalidointia riippumatta siitä, miten fetcher toimii.

Ympäröikää sovelluksenne SWRConfigilla, jonka value-prop sisältää fetcher-funktion: value={{ fetcher: (url) => fetch(url).then(r => r.json()) }}. Jokainen useSWR-kutsu, josta fetcher-argumentti puuttuu, käyttää tätä maailmanlaajuista oletusarvoa.

Tämä keskittää API-määritykset, kuten perus-URL:n ja todennusotsakkeet, yhteen paikkaan ilman niiden toistamista jokaisessa hook-kutsussa.

Klassisessa mallissa useEffect + useState hallitsevat lataus-, data- ja virhetiloja manuaalisesti. SWR korvaa tämän kaiken yhdellä hook-kutsulla, joka käsittelee automaattisesti välimuistin, deduplikoinnin, taustapäivitykset ja virheiden uudelleenyritykset.

Koodin määrä vähenee huomattavasti: tyypillinen dataa hakeva komponentti kutistuu yli 20 rivistä kolmeen.

Avain yksilöi pyynnön. Käyttäkää yksinkertaisissa tapauksissa URL-merkkijonoa. Parametrillisissa pyynnöissä käyttäkää taulukkoavainta: [url, params], jossa params on vakaa objekti tai merkkijono. Null poistaa pyynnön käytöstä.

Hyvä avainsuunnittelu varmistaa, että toisiinsa liittyvät pyynnöt jakavat välimuistimerkinnät ja etteivät toisiinsa liittymättömät pyynnöt saa samaa avainta.

SWR käsittelee uudelleenvalidoinnin älykkäästi: dedupingInterval, jonka oletusarvo on 2 sekuntia, estää useiden uudelleenvalidointien käynnistymisen samanaikaisesti, jos monet komponentit otetaan käyttöön yhtä aikaa. Kutakin avainta kohden lähetetään deduplikointi-ikkunan aikana vain yksi pyyntö.

Tämä estää suurissa komponenttipuissa yleiset thundering herd -ongelmat, joissa monet komponentit hakevat samaa dataa.

SWR:n on rakentanut Vercel, Next.js:n takana oleva yritys, ja integraatio on saumaton. getServerSideProps tai getStaticProps voi esiladata datan, ja SWR hydratoi tuon esiladatun arvon asiakaspuolella.

Tämä tarjoaa palvelimella renderöidyn alustavan HTML:n sekä automaattisen asiakaspuolen uudelleenvalidoinnin liitettäessä komponentti käyttöliittymään ja yhdistää SSR:n ja SWR:n parhaat puolet.

SWR toteuttaa Stale-While-Revalidate-strategian: välimuistissa oleva data tarjotaan heti, validoidaan uudelleen taustalla ja käyttöliittymä päivitetään tuoreen datan saapuessa. Uudelleenvalidointi käynnistyy kohdistuksen palautuessa, yhteyden muodostuessa uudelleen, mutaten yhteydessä ja kyselyllä. Maailmanlaajuinen välimuisti deduplikoi komponenttien väliset pyynnöt, ja fetcher-funktio on täysin vaihdettavissa.

Tämä malli yksinkertaistaa datan hakemiseen liittyvää koodia huomattavasti ja parantaa koettua suorituskykyä.