Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

SWR (state-while-revalidate) on Vercelin kehittämä tiedonhakumenetelmä. Se toimii noutamalla tiedot ensin, lähettämällä noutopyynnön niiden vahvistamiseksi ja palauttamalla sitten päivitetyt tiedot.

SWR on erittäin tehokas, koska se ei vain mahdollista uudelleenkäytettävien tietojen hakemista, vaan siinä on myös sisäänrakennettu välimuisti, sivutus ja uudelleentarkistus. SWR: n avulla verkkosivusto näyttää välimuistissa olevan sisällön samalla, kun se hakee ajantasaista sisältöä taustalla.

Kuinka SWR toimii?

Normaalisti sinä noutaa tiedot Axios- tai hakumenetelmällä. Nämä menetelmät muodostavat yhteyden tietoresurssiin, noutavat ja palauttavat tiedot ja sulkevat sitten yhteyden. SWR hakee tiedot kuitenkin eri tavalla. Se toimii kolmessa vaiheessa:

  1. Palauttaa vanhentuneet tiedot välimuistista.
  2. Lähettää hakupyynnön tietojen tarkistamiseksi uudelleen.
  3. Palauttaa ajantasaiset tiedot.
instagram viewer

SWR ei korvaa hakusovellusliittymää. Sen sijaan voit renderöidä välimuistissa olevaa sisältöä sivustollasi heti, kun käyttäjä vierailee ja päivittää sisältöä, kun se vanhenee.

Joten mistä SWR tietää, milloin välimuisti on virheellinen? Välimuistin ohjausotsikon vastauksen kautta. Vastauksella on kaksi tilaa: tuore ja vanhentunut. Uusi tila tarkoittaa, että välimuistia voidaan käyttää uudelleen, kun taas vanhentunut tila tarkoittaa, että se on virheellinen. Määrität ajan, jonka vastaus on voimassa max-age -direktiivissä.

SWR pitää mitä tahansa enimmäisikää vanhempia välimuistissa olevia vastauksia virheellisinä. Kun sovelluksesi on renderöinyt vanhentuneet välimuistitiedot, SWR vahvistaa ne uudelleen ja palauttaa tuoreet tiedot, joita voit käyttää sivun päivittämiseen.

Datan hakeminen Next.js: ssä SWR: n avulla

Aloita SWR: n käyttö Reactissa asentamalla se ensin paketinhallinnan kautta. Tämä komento käyttää npm-komentoa.

npm Asentaa swr\n

Tuo useSWR-koukku komponenttitiedostossa swr: stä.

tuonti käytä SWR: ää alkaen"swr"\n

UseSWR-koukku hyväksyy kaksi argumenttia:

  1. Yksilöllinen tunniste tiedoille. Yleensä API URL-osoite.
  2. Hakutoiminto. Tätä toimintoa käytetään tietojen hakemiseen. Se voi käyttää haku-, Axios- tai muita tiedonhakutyökaluja.

Koukku palauttaa tiedot ja virheobjektin. Varmista, että sinä käytä tätä koukkua parhaiden käytäntöjen mukaisesti.

Tässä on esimerkki useSWR-koukun käyttämisestä.

konst hakija = (...args) => hae(...args).hen(res => res.json());\nconst {data, error} = useSWR("/api/data", hakija);\n

Voit renderöidä tiedot komponentissa seuraavasti:

tuonti käytä SWR: ää alkaen"swr"\ntoiminto Etusivu () {\n konst hakija = (...args) => hae(...args).hen(res => res.json());\n konst {data, error} = useSWR("/api/data", hakija);\n jos (virhe) palata<div>lataus epäonnistuidiv>\n jos (!data) palata<div>Ladataan...div>\n palata<div>{data}div>\n}\n

Tämä on yksinkertainen SWR: n toteutus. The SWR asiakirjat mene syvemmälle, joten tutustu niihin saadaksesi lisätietoja.

Miksi käyttää SWR: ää?

SWR: llä on monia etuja muihin tiedonhakumenetelmiin verrattuna.

Välimuisti

Perinteisissä tiedonhakumenetelmissä sinun on käytettävä kehrää tai latausviestiä käyttökokemuksen parantamiseksi, kun sovellus hakee tietoja.

SWR mahdollistaa vanhentuneiden tietojen näyttämisen käyttäjälle samalla, kun vahvistat sen uudelleen. Tämä tarkoittaa, että käyttäjän ei tarvitse odottaa hakijan palauttavan tiedot.

Uudelleenvalidointi

Uudelleenvalidoinnin avulla SWR tekee välimuistissa olevat tiedot jälleen tuoreiksi ja sivu hahmonnetaan uudelleen ajantasaisilla tiedoilla. Uudelleentarkistus on erityisen tärkeää sivustoille, joiden sisältö muuttuu säännöllisesti.

Sivunumerointi

The käytä SWRInfinite-koukkua SWR: n avulla voit toteuttaa sivutuksen helposti tai jopa luoda äärettömän latauskäyttöliittymän.

SWR mahdollistaa käyttäjän palata vierityskohtaan sivulla, kun hän palaa sivulle. Tämä edistää parempaa käyttökokemusta.

Riippuva tiedon nouto

Voit hakea tietoja, jotka ovat riippuvaisia ​​muista tiedoista. Sen avulla voit käyttää yhdestä pyynnöstä palautettuja tietoja toisessa pyynnössä.

Käytä SWR: ää käytettävyyden parantamiseen

SWR on tiedonhakutyökalu, jossa on automaattinen uudelleentarkistusominaisuus, joka auttaa sovelluksia renderöimään välimuistissa olevaa sisältöä odottaessaan ajan tasalla olevaa sisältöä. Käyttäjät voivat käsitellä sisältöä heti sen sijaan, että odottaisivat palvelimella tietojen palauttamista.

SWR auttaa myös luomaan sivutusta, loputonta latausta, vierityspaikan palautusta ja muita monimutkaisia ​​ominaisuuksia. Jos haet tietoja, jotka tarvitsevat säännöllisiä päivityksiä, sinun kannattaa ehdottomasti harkita sen käyttöä.