Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

SWR (state-while-revalidate) er en datahentningsmetode bygget af Vercel. Det fungerer ved først at hente data, sende en hentningsanmodning for at genvalidere dem og derefter returnere de opdaterede data.

SWR er meget kraftfuld, da den ikke kun tillader genanvendelig datahentning, men også har indbygget caching, paginering og genvalidering på fokus. Ved hjælp af SWR viser et websted cachelagret indhold, mens det henter opdateret indhold i baggrunden.

Hvordan virker SWR?

Normalt ville du det hente data ved hjælp af Axios eller hentemetoden. Disse metoder opretter forbindelse til dataressourcen, henter og returnerer dataene, og luk derefter forbindelsen. SWR henter dog data anderledes. Det fungerer i tre trin:

  1. Returnerer forældede data fra cachen.
  2. Sender hentningsanmodningen for at genvalidere data.
  3. Returnerer opdaterede data.

SWR er ikke en erstatning for hente-API'en. I stedet giver det dig mulighed for at gengive cachelagret indhold på dit websted, så snart brugeren besøger, og opdatere det indhold, når det bliver forældet.

instagram viewer

Så hvordan ved SWR, hvornår cachen er ugyldig? Gennem et cache-kontrol header svar. Svaret har to tilstande: frisk og gammel. En frisk tilstand betyder, at cachen kan genbruges, mens en forældet tilstand betyder, at den er ugyldig. Du angiver den tid, svaret forbliver gyldigt i max-age direktivet.

SWR anser ethvert cachelagret svar, der er ældre end maks. alder, for ugyldigt. Når din app har gengivet de forældede cachelagrede data, genvaliderer SWR dem og returnerer friske data, som du kan bruge til at opdatere siden.

Sådan henter du data i Next.js med SWR

Begynd at bruge SWR i React ved at installere det først via en pakkehåndtering. Denne kommando bruger npm.

npm installere swr\n

I en komponentfil skal du importere useSWR-krogen fra swr.

importere brug SWR fra"swr"\n

UseSWR-krogen accepterer to argumenter:

  1. En unik identifikator for dataene. Normalt API URL.
  2. En hentefunktion. Dette er den funktion, der bruges til at hente data. Det kan bruge fetch, Axios eller andre datahentningsværktøjer.

Krogen returnerer dataene og et fejlobjekt. Vær sikker på at du brug denne krog i overensstemmelse med bedste praksis.

Her er et eksempel, der viser, hvordan man bruger useSWR-krogen.

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

Du kan gengive dataene i en komponent som denne:

importere brug SWR fra"swr"\nfunktion Hjem () {\n konst henter = (...args) => hente(...args).then(res => res.json());\n konst {data, fejl} = brugSWR("/api/data", henter);\n hvis (fejl) Vend tilbage<div>kunne ikke indlæsesdiv>\n hvis (!data) Vend tilbage<div>Indlæser...div>\n Vend tilbage<div>{data}div>\n}\n

Dette er en simpel implementering af SWR. Det SWR-dokumenter gå mere i dybden, så tjek dem ud for at lære mere.

Hvorfor bruge SWR?

SWR har mange fordele i forhold til andre datahentningsmetoder.

Caching

Med traditionelle datahentningsmetoder skal du bruge en spinner eller indlæsningsmeddelelse for at forbedre brugeroplevelsen, når appen henter data.

SWR giver dig mulighed for at vise forældede data til brugeren, mens du genvaliderer dem. Dette betyder, at brugeren ikke behøver at vente på, at henteren returnerer data.

Genvalidering

Gennem revalidering gør SWR de cachelagrede data friske igen, og siden gengives igen med opdaterede data. Genvalidering er især vigtig for websteder, hvis indhold jævnligt ændres.

Sideinddeling

Det brugSWRIendelig krog fra SWR lader dig implementere paginering nemt eller endda oprette en uendelig indlæsnings-UI.

SWR giver en bruger mulighed for at vende tilbage til rullepositionen på en side, når de kommer tilbage til den. Dette bidrager til en bedre brugeroplevelse.

Afhængig datahentning

Du kan hente data, der er afhængige af andre data. Det giver dig mulighed for at bruge de data, der returneres fra én anmodning, i en anden anmodning.

Brug SWR til at forbedre brugervenligheden

SWR er et datahentningsværktøj med en automatisk genvalideringsfunktion, der hjælper applikationer med at gengive cachelagret indhold, mens de venter på opdateret indhold. Brugere kan engagere sig med indhold med det samme i stedet for at vente på serveren for at returnere data.

SWR hjælper dig også med at oprette paginering, uendelig indlæsning, gendannelse af rulleposition og andre komplekse funktioner. Hvis du henter data, der har brug for regelmæssige opdateringer, bør du bestemt overveje at bruge det.