Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

SWR (state-while-revalidate) is een methode voor het ophalen van gegevens, gebouwd door Vercel. Het werkt door eerst gegevens op te halen, een ophaalverzoek te verzenden om het opnieuw te valideren en vervolgens de bijgewerkte gegevens terug te sturen.

SWR is erg krachtig omdat het niet alleen het ophalen van herbruikbare gegevens mogelijk maakt, maar ook ingebouwde caching, paginering en hervalidatie op focus heeft. Met behulp van SWR geeft een website inhoud in de cache weer terwijl deze op de achtergrond up-to-date inhoud ophaalt.

Hoe werkt SWR?

Normaal gesproken zou je dat doen gegevens ophalen met behulp van Axios of de ophaalmethode. Deze methoden maken verbinding met de gegevensbron, halen de gegevens op en retourneren deze en verbreken vervolgens de verbinding. SWR haalt gegevens echter op een andere manier op. Het werkt in drie stappen:

  1. Retourneert verouderde gegevens uit de cache.
    2. instagram viewer
  2. Verzendt het ophaalverzoek om gegevens opnieuw te valideren.
  3. Retourneert actuele gegevens.

SWR is geen vervanging voor de ophaal-API. In plaats daarvan kunt u inhoud in de cache op uw site weergeven zodra de gebruiker deze bezoekt en die inhoud bijwerken wanneer deze oud wordt.

Dus hoe weet SWR wanneer de cache ongeldig is? Via een cache-control header-antwoord. Het antwoord heeft twee statussen: vers en muf. Een nieuwe status betekent dat de cache opnieuw kan worden gebruikt, terwijl een verouderde status betekent dat deze ongeldig is. U specificeert de tijd dat het antwoord geldig blijft in de max-age richtlijn.

SWR beschouwt elk antwoord in de cache dat ouder is dan de maximale leeftijd als ongeldig. Nadat uw app de verouderde gegevens in de cache heeft weergegeven, valideert SWR deze opnieuw en retourneert nieuwe gegevens die u kunt gebruiken om de pagina bij te werken.

Gegevens ophalen in Next.js met SWR

Begin met het gebruik van SWR in React door het eerst te installeren via een pakketbeheerder. Deze opdracht gebruikt npm.

npm installeren swr\n

Importeer in een componentbestand de useSWR-hook uit swr.

importeren gebruik SWR van"swr"\N

De useSWR-hook accepteert twee argumenten:

  1. Een unieke identificatie voor de gegevens. Meestal de API-URL.
  2. Een ophaalfunctie. Dit is de functie die wordt gebruikt om gegevens op te halen. Het kan fetch, Axios of andere tools voor het ophalen van gegevens gebruiken.

De haak retourneert de gegevens en een foutobject. Zorg ervoor dat je gebruik deze haak in overeenstemming met de beste praktijken.

Hier is een voorbeeld dat laat zien hoe de useSWR-haak moet worden gebruikt.

const ophaler = (...argumenten) => ophalen(...args).dan(res => res.json());\nconst {gegevens, fout} = useSWR("/api/gegevens", ophaaldienst);\n

U kunt de gegevens als volgt in een component weergeven:

importeren gebruik SWR van"swr"\nfunctie Thuis () {\n const ophaler = (...argumenten) => ophalen(...args).dan(res => res.json());\n const {gegevens, fout} = gebruikSWR("/api/gegevens", ophaaldienst);\n als (fout) opbrengst<div>Laden misluktdiv>\N als (!gegevens) opbrengst<div>bezig met laden...div>\N opbrengst<div>{gegevens}div>\n}\n

Dit is een eenvoudige implementatie van SWR. De SWR-documenten ga dieper in, dus bekijk ze voor meer informatie.

Waarom SWR gebruiken?

SWR heeft veel voordelen ten opzichte van andere methoden voor het ophalen van gegevens.

Caching

Bij traditionele methoden voor het ophalen van gegevens moet u een spinner of laadbericht gebruiken om de gebruikerservaring te verbeteren wanneer de app gegevens ophaalt.

Met SWR kunt u verouderde gegevens aan de gebruiker weergeven, terwijl u deze opnieuw valideert. Dit betekent dat de gebruiker niet hoeft te wachten tot de ophaaldienst gegevens retourneert.

Revalidatie

Door middel van hervalidatie maakt SWR de gegevens in de cache weer actueel en wordt de pagina opnieuw weergegeven met up-to-date gegevens. Revalidatie is vooral belangrijk voor sites waarvan de inhoud regelmatig verandert.

Paginering

De gebruikSWRInfinite haak van SWR kunt u eenvoudig paginering implementeren of zelfs een gebruikersinterface voor oneindig laden maken.

SWR stelt een gebruiker in staat om terug te keren naar de scrollpositie op een pagina wanneer ze erop terugkomen. Dit draagt ​​bij aan een betere gebruikerservaring.

Afhankelijke gegevens ophalen

U kunt gegevens ophalen die afhankelijk zijn van andere gegevens. Hiermee kunt u de gegevens die uit het ene verzoek zijn geretourneerd, gebruiken in een ander verzoek.

Gebruik SWR om de bruikbaarheid te verbeteren

SWR is een hulpmiddel voor het ophalen van gegevens met een functie voor automatische hervalidatie waarmee toepassingen in de cache opgeslagen inhoud kunnen weergeven terwijl ze wachten op actuele inhoud. Gebruikers kunnen meteen met inhoud bezig zijn in plaats van te wachten op de server om gegevens terug te sturen.

SWR helpt u ook bij het creëren van paginering, oneindig laden, herstel van de scrollpositie en andere complexe functies. Als u gegevens ophaalt die regelmatig moeten worden bijgewerkt, moet u zeker overwegen om deze te gebruiken.