SWR-grundbegreber: Stale-While-Revalidate

SWR står for Stale-While-Revalidate, en HTTP-cache-strategi, der er defineret i RFC 5861. Strategien er at vise forældede (cachede) data med det samme til brugeren, derefter revalidere i baggrunden og opdatere brugerfladen, når friske data ankommer.

Denne tilgang prioriterer den oplevede ydeevne: Brugere ser data med det samme i stedet for at vente på en tur-retur til netværket.

Med traditionelle indlæsningsmønstre ser brugere en indlæsningsindikator ved hver navigering. Med SWR ser de de sidst kendte data med det samme, og brugerfladen opdateres lydløst i baggrunden, hvis dataene er ændret.

Det får applikationer til at føles betydeligt hurtigere og mindsker den kognitive afbrydelse, som indlæsningstilstande medfører.

SWR revaliderer automatisk data, når browserens vindue får fokus igen (brugeren skifter fane og vender tilbage), netværksforbindelsen genoprettes efter at have været offline, mutate() kaldes eksplicit, eller en timer for refreshInterval udløses.

Disse automatiske udløsere holder data friske uden at udvikleren manuelt skal håndtere logikken til at hente data igen.

En SWR-nøgle kan være i en af flere tilstande: loading (ingen cachede data, første hentning i gang), revalidating (cachede data findes, opdatering i baggrunden i gang), error (anmodningen mislykkedes) eller success (friske data er tilgængelige).

Hvis du forstår disse tilstande, kan du opbygge præcise indlæsningsskeletoner og fejlbrugerflader.

SWR vedligeholder en global cache i hukommelsen, der er indekseret efter forespørgselsnøglen (typisk en URL-streng). Alle komponenter, der anmoder om den samme nøgle, får den samme cachede værdi og deltager i den samme revalideringscyklus.

Med denne automatiske deduplicering kan 10 komponenter hver kalde useSWR med den samme nøgle, mens der kun sendes én netværksanmodning.

SWR adskiller logikken til cachehåndtering fra selve datahentningen. Du angiver en hentefunktion: en async-funktion, der modtager nøglen og returnerer data.

Hentefunktionen kan udskiftes: brug fetch, axios, graphql-request eller en vilkårlig asynkron datakilde. SWR håndterer caching og revalidering uanset, hvordan hentefunktionen fungerer.

Pak din app ind i SWRConfig med en value-prop, der indeholder en hentefunktion: value={{ fetcher: (url) => fetch(url).then(r => r.json()) }}. Alle useSWR-kald, der udelader et fetcher-argument, bruger denne globale standard.

Det samler API-konfigurationen (basis-URL, godkendelsesheadere) ét sted, så du ikke skal gentage den i hvert hook-kald.

Det klassiske mønster bruger useEffect + useState til manuelt at håndtere loading-, data- og error-tilstande. SWR erstatter alt dette med ét hook-kald, der automatisk håndterer caching, deduplicering, baggrundsopdatering og gentagelse ved fejl.

Reduktionen i kode er betydelig: En typisk komponent til datahentning bliver reduceret fra over 20 linjer til 3 linjer.

Nøglen identificerer entydigt en forespørgsel. Brug URL-strengen i enkle tilfælde. Til forespørgsler med parametre kan du bruge en array-nøgle: [url, params], hvor params er et stabilt objekt eller en streng. null deaktiverer forespørgslen.

Et godt nøgledesign sikrer, at relaterede forespørgsler deler cacheposter, og at uvedkommende forespørgsler ikke kolliderer.

SWR er intelligent, når det revaliderer: dedupingInterval (standardværdien er 2 sekunder) forhindrer, at flere revalideringer udløses samtidigt, hvis mange komponenter monteres på én gang. Der sendes kun én anmodning pr. nøgle inden for dedupliceringsvinduet.

Det forhindrer problemer med samtidige masseforespørgsler, som er almindelige i store komponenttræer, hvor mange komponenter henter de samme data.

SWR er udviklet af Vercel, virksomheden bag Next.js, og integrationen er problemfri. getServerSideProps eller getStaticProps kan forhåndshente data, og SWR hydratiserer ud fra den forhåndshentede værdi på klienten.

Det giver dig servergenereret indledende HTML med automatisk revalidering på klientsiden ved montering, så du kombinerer fordelene ved SSR og SWR.

SWR implementerer strategien Stale-While-Revalidate: vis cachede data med det samme, revalidér i baggrunden, og opdatér brugerfladen, når friske data er tilgængelige. Revalidering udløses ved fokus, genoprettet forbindelse, mutate og periodiske forespørgsler. Den globale cache deduplikerer forespørgsler på tværs af komponenter, og hentefunktionen kan udskiftes helt.

Denne model forenkler koden til datahentning markant og giver samtidig en hurtigere oplevet ydeevne.