Next.js är ett robust ramverk som gör att utvecklare snabbt kan bygga renderade React-applikationer på serversidan. Den har olika väsentliga funktioner. En av dess nyckelfunktioner är dess förmåga att enkelt hämta data och göra den lätt tillgänglig för komponenterna.

Datahämtning är en viktig funktion som gör att utvecklare kan hämta och visa data på en webbplats/webbapplikation. Det finns några olika sätt att hämta data i Next.js, vart och ett med sina fördelar och användningsfall. Den här artikeln kommer att utforska olika sätt att hämta data i Next.js.

Använda useEffect Hook för att hämta data

De useEffect krok är en React krok som används för att utföra biverkningar, som API-anrop i komponenter. Du kan använda useEffect-kroken för att hämta data i Next.js.

Den här kroken är användbar för sidor som behöver dynamisk data, som användarprofilsidor som visar information som är specifik för den användare som är inloggad.

För att använda useEffect-kroken importerar du den först till din komponent, hämtar data och renderar din sida med den.

Till exempel:

importera { useEffect, useState } från'reagera';
exporterastandardfungeraHem() {
konst [data, setData] = useState("");
 useEffect(() => {
 hämta(' https://api.example.com/data');
 .sedan( (svar) => response.json() )
 .sedan( (data) => setData (data) )
 }, []); 
lämna tillbaka (


 {data.name}
 </div>
 )
}

Detta kodblock använder useEffect-kroken för att hämta data från ett API. If skickar två parametrar till useEffect-kroken: en funktion för att hämta data och en beroendematris. På framgång, använder den setData() för att uppdatera komponentens tillstånd med de data som hämtningsförfrågan returnerar.

Beroendematrisen du skickar till useEffect-kroken bör innehålla värdet som effekten beror på. Komponenten kör om effekten endast när värdet i beroendematrisen ändras. Om beroendematrisen är tom – som i det här exemplet – kommer effekten bara att köras på den första renderingen.

Hanterar automatisk förlängning med hjälp av SWR

De SWR (stale-while-revalidate) library är ett React hook-bibliotek för att hantera datahämtning. Du måste ställ in SWR-biblioteket först för att använda den i din Next-applikation.

En av SWR-bibliotekets nyckelfunktioner är dess förmåga att automatisera omvalidering av data. Den här funktionen är viktig när data uppdateras ofta och du behöver den för att vara konsekvent uppdaterad. Denna funktion säkerställer att din applikation alltid har tillgång till den senaste informationen, vilket gör den mer dynamisk och lyhörd för dina användare.

SWR-biblioteket gör en ny hämtningsförfrågan till ett API när en användare åter fokuserar på en sida eller växlar mellan flikar. När en användare lämnar en sida blir informationen som visas på skärmen inaktuell. När de återvänder till sidan skickar SWR-biblioteket en ny hämtningsförfrågan till API: t och jämför den nya datan med den inaktuella informationen för att avgöra om den har ändrats.

För att stoppa SWR-biblioteket från att utföra den här åtgärden kan du använda revalidateOnFocus alternativ.

Såhär:

konst { data, error, isLoading } = useSWR(' https://api.example.com/data', apportör, {
 revalidateOnFocus: falsk,
})

Om du ställer in egenskapen revalidateOnFocus till false säkerställer du att SWR-biblioteket inte omvaliderar dina data varje gång du fokuserar om på sidan.

SWR-biblioteket validerar också data närhelst en användare återansluter till internet. Denna åtgärd kan vara till stor hjälp i vissa situationer och fungerar automatiskt.

För att inaktivera åtgärden kan du använda revalidateOnReconnect alternativ:

konst { data, error, isLoading } = useSWR(' https://api.example.com/data', apportör, {
 revalidateOnReconnect: falsk,
})

För att inaktivera automatisk omvalidering av dina data, ställ in egenskaperna för både revalidateOnFocus och revalidateOnRecconect till false.

Använda Isomorphic-Unfetch Library för att utföra hämtningsförfrågningar

De isomorf-ohämtad library är ett litet, lätt bibliotek som kan utföra hämtningsförfrågningar i en Next.js-applikation. Biblioteket är ett utmärkt alternativ till den infödda hämta API. Det är enkelt att använda, vilket gör det perfekt för utvecklare som är nya med att göra hämtningsförfrågningar.

Du kan använda isomorphic-unfetch som en polyfill för äldre webbläsare som inte stöder det inbyggda hämta API. Det isomorfa-unfetch-biblioteket är minimalistiskt och lämpligt för att arbeta med små applikationer.

För att använda isomorphic-unfetch i ett Next.js-program, installera biblioteket genom att köra följande kommando:

npm installera isomorphic-unfetch

Du kan sedan importera biblioteket och använda det i din komponent för att hämta data, så här:

importera Hämta från"isomorphic-unfetch"
importera {useState, useEffect} från'reagera'
exporterastandardfungeraHem() {
konst [data, setData] = useState(null)
 useEffect(() => {
 Hämta(' https://api.example.com/data')
 .sedan( (svar) => response.json)
 .sedan( (data) => setData (data) )
 }, [])

om (!data) lämna tillbaka<div>Läser in...div>
lämna tillbaka (


{data.name}</h1>
 </div>
 )
}

Funktionen isomorphic-unfetch fungerar på både klientsidan och serversidan.

Effektiv datahämtning med Next.js

Datahämtning är en viktig funktion när man utvecklar applikationer. Next.js tillhandahåller flera sätt att hämta data, som vart och ett har sina fördelar och avvägningar.

När du bestämmer dig för vilken metod du ska använda, överväg avvägningarna och se till att du använder en teknik som du är bekväm med.