Vad är SWR och hur använder du det i Next.js?

Vad är SWR och hur använder du det i Next.js?
Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

SWR (state-while-revalidate) är en datahämtningsmetod byggd av Vercel. Det fungerar genom att hämta data först, skicka en hämtningsförfrågan för att återvalidera den och sedan returnera den uppdaterade datan.





SWR är mycket kraftfull eftersom den inte bara tillåter återanvändbar datahämtning utan också har inbyggd cachelagring, sidnumrering och omvalidering i fokus. Med hjälp av SWR visar en webbplats cachelagrat innehåll medan den hämtar aktuellt innehåll i bakgrunden.



Hur fungerar SWR?

Normalt skulle du det hämta data med Axios eller hämtametoden . Dessa metoder ansluter till dataresursen, hämtar och returnerar data och stänger sedan anslutningen. SWR hämtar dock data på olika sätt. Det fungerar i tre steg:





  1. Returnerar inaktuella data från cachen.
  2. Skickar hämtningsförfrågan för att återvalidera data.
  3. Returnerar uppdaterad data.

SWR är inte en ersättning för hämta API. Istället låter det dig rendera cachat innehåll på din webbplats så snart användaren besöker och uppdatera innehållet när det blir inaktuellt.

Så hur vet SWR när cachen är ogiltig? Genom ett cache-kontrollhuvudsvar. Svaret har två tillstånd: färskt och inaktuellt. Ett färskt tillstånd betyder att cachen kan återanvändas medan ett inaktuellt tillstånd betyder att det är ogiltigt. Du anger den tid svaret förblir giltigt i maxålderdirektivet.



SWR anser att alla cachade svar som är äldre än maxåldern är ogiltiga. När din app har renderat den inaktuella cachade datan, kommer SWR att validera den på nytt och returnera ny data som du kan använda för att uppdatera sidan.

hur man tar bort vattenstämpel från bilder

Hur man hämtar data i Next.js med SWR

Börja använda SWR i React genom att installera det först via en pakethanterare. Detta kommando använder npm.



 npm install swr\n

Importera useSWR-kroken från swr i en komponentfil.

 import useSWR from "swr"\n

UseSWR-kroken accepterar två argument:



  1. En unik identifierare för data. Vanligtvis API URL.
  2. En apportfunktion. Detta är funktionen som används för att hämta data. Den kan använda hämta, Axios eller andra verktyg för datahämtning.

Kroken returnerar data och ett felobjekt. Se till att du använd denna krok i enlighet med bästa praxis .

hur man ansluter en Nintendo -switch till en tv

Här är ett exempel som visar hur man använder useSWR-kroken.

 const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n

Du kan rendera data i en komponent så här:

 import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n

Detta är en enkel implementering av SWR. De SWR-dokument gå mer på djupet så kolla in dem för att lära dig mer.

Varför använda SWR?

SWR har många fördelar jämfört med andra datahämtningsmetoder.

Cachning

Med traditionella datahämtningsmetoder måste du använda en spinner eller ett laddningsmeddelande för att förbättra användarupplevelsen när appen hämtar data.

SWR låter dig visa inaktuella data för användaren samtidigt som du validerar den på nytt. Detta innebär att användaren inte behöver vänta på att hämtaren ska returnera data.

Förlängning

Genom revalidering gör SWR den cachade datan fräsch igen och sidan återrenderas med uppdaterad data. Revalidering är särskilt viktigt för webbplatser vars innehåll ändras regelbundet.

webbplatser för när du har tråkigt

Paginering

De användSWRInfinite krok från SWR låter dig implementera paginering enkelt eller till och med skapa ett oändligt laddningsgränssnitt.

Scroll Position Recovery

SWR tillåter en användare att återgå till rullningspositionen på en sida när de kommer tillbaka till den. Detta bidrar till en bättre användarupplevelse.

Beroende datahämtning

Du kan hämta data som är beroende av annan data. Det låter dig använda data som returneras från en begäran i en annan begäran.

Använd SWR för att förbättra användbarheten

SWR är ett datahämtningsverktyg med en funktion för automatisk omvalidering som hjälper applikationer att rendera cachelagrat innehåll medan de väntar på uppdaterat innehåll. Användare kan engagera sig med innehåll direkt istället för att vänta på servern för att returnera data.

SWR hjälper dig också att skapa paginering, oändlig laddning, rullningspositionsåterställning och andra komplexa funktioner. Om du hämtar data som behöver regelbundna uppdateringar bör du definitivt överväga att använda den.