Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

SWR (state-while-revalidate) er en datahentingsmetode bygget av Vercel. Det fungerer ved å hente data først, sende en henteforespørsel for å validere det på nytt, og deretter returnere de oppdaterte dataene.

SWR er veldig kraftig ettersom den ikke bare tillater gjenbrukbar datahenting, men også har innebygd caching, paginering og revalidering på fokus. Ved å bruke SWR viser et nettsted bufret innhold mens det henter oppdatert innhold i bakgrunnen.

Hvordan fungerer SWR?

Vanligvis ville du det hente data ved å bruke Axios eller hentemetoden. Disse metodene kobles til dataressursen, henter og returnerer dataene og stenger deretter forbindelsen. Imidlertid henter SWR data annerledes. Det fungerer i tre trinn:

  1. Returnerer foreldede data fra hurtigbufferen.
  2. Sender henteforespørselen for å revalidere data.
  3. Returnerer oppdaterte data.

SWR er ikke en erstatning for appetch API. I stedet lar den deg gjengi bufret innhold på nettstedet ditt så snart brukeren besøker og oppdatere det innholdet når det blir gammelt.

instagram viewer

Så hvordan vet SWR når cachen er ugyldig? Gjennom en cache-kontroll-headerrespons. Svaret har to tilstander: fersk og gammel. En fersk tilstand betyr at hurtigbufferen kan gjenbrukes mens en gammel tilstand betyr at den er ugyldig. Du spesifiserer tiden svaret forblir gyldig i maks-alder-direktivet.

SWR anser ethvert bufret svar som er eldre enn maks-alder som ugyldig. Etter at appen din har gjengitt de foreldede bufrede dataene, vil SWR validere dem på nytt og returnere ferske data som du kan bruke til å oppdatere siden.

Hvordan hente data i Next.js med SWR

Begynn å bruke SWR i React ved å installere den først via en pakkebehandling. Denne kommandoen bruker npm.

npm installere swr\n

I en komponentfil importerer du useSWR-kroken fra swr.

import bruk SWR fra"swr"\n

UseSWR-kroken godtar to argumenter:

  1. En unik identifikator for dataene. Vanligvis API URL.
  2. En hentefunksjon. Dette er funksjonen som brukes til å hente data. Den kan bruke henting, Axios eller andre datahentingsverktøy.

Kroken returnerer dataene og et feilobjekt. Vær sikker på at du bruk denne kroken i samsvar med beste praksis.

Her er et eksempel som viser hvordan du bruker useSWR-kroken.

konst henter = (...args) => hente(...args).then(res => res.json());\nconst {data, feil} = brukSWR("/api/data", henter);\n

Du kan gjengi dataene i en komponent som dette:

import bruk SWR fra"swr"\nfunksjon Hjem () {\n konst henter = (...args) => hente(...args).then(res => res.json());\n konst {data, feil} = brukSWR("/api/data", henter);\n hvis (feil) komme tilbake<div>kunne ikke lastediv>\n hvis (!data) komme tilbake<div>laster inn...div>\n komme tilbake<div>{data}div>\n}\n

Dette er en enkel implementering av SWR. De SWR-dokumenter gå mer i dybden, så sjekk dem ut for å lære mer.

Hvorfor bruke SWR?

SWR har mange fordeler i forhold til andre datahentingsmetoder.

Buffer

Med tradisjonelle datahentingsmetoder må du bruke en spinner eller lastemelding for å forbedre brukeropplevelsen når appen henter data.

SWR lar deg vise foreldede data til brukeren, mens du revaliderer dem. Dette betyr at brukeren ikke trenger å vente på at henteren skal returnere data.

Revalidering

Gjennom revalidering gjør SWR de hurtigbufrede dataene friske igjen og siden gjengis på nytt med oppdaterte data. Revalidering er spesielt viktig for nettsteder hvis innhold jevnlig endres.

Paginering

De brukSWRInfinite krok fra SWR lar deg implementere paginering enkelt eller til og med lage et uendelig lastegrensesnitt.

SWR lar en bruker gå tilbake til rulleposisjonen på en side når de kommer tilbake til den. Dette bidrar til en bedre brukeropplevelse.

Henting av avhengig data

Du kan hente data som er avhengig av andre data. Den lar deg bruke dataene som returneres fra en forespørsel i en annen forespørsel.

Bruk SWR for å forbedre brukervennligheten

SWR er et datahentingsverktøy med en automatisk revalideringsfunksjon som hjelper applikasjoner med å gjengi bufret innhold mens de venter på oppdatert innhold. Brukere kan engasjere seg med innhold med en gang i stedet for å vente på serveren for å returnere data.

SWR hjelper deg også med å lage paginering, uendelig lasting, gjenoppretting av rulleposisjon og andre komplekse funksjoner. Hvis du henter data som trenger regelmessige oppdateringer, bør du definitivt vurdere å bruke det.