Next.js is een robuust framework waarmee ontwikkelaars snel server-side gerenderde React-applicaties kunnen bouwen. Het heeft verschillende essentiële kenmerken. Een van de belangrijkste kenmerken is de mogelijkheid om eenvoudig gegevens op te halen en deze direct beschikbaar te maken voor de componenten.

Het ophalen van gegevens is een essentiële functie waarmee ontwikkelaars gegevens kunnen ophalen en weergeven op een website/webtoepassing. Er zijn een paar verschillende manieren om gegevens op te halen in Next.js, elk met zijn eigen voordelen en use-cases. Dit artikel onderzoekt verschillende manieren om gegevens op te halen in Next.js.

Gebruik maken van de useEffect Hook om gegevens op te halen

De gebruikEffect haak is een Reageer haak gebruikt om bijwerkingen uit te voeren, zoals API-aanroepen in componenten. U kunt de useEffect-hook gebruiken om gegevens op te halen in Next.js.

Deze hook is handig voor pagina's die dynamische gegevens nodig hebben, zoals gebruikersprofielpagina's die informatie tonen die specifiek is voor de gebruiker die is ingelogd.

Om de useEffect-hook te gebruiken, importeert u deze eerst in uw component naar keuze, haalt u de gegevens op en geeft u uw pagina er gebruik van.

Bijvoorbeeld:

importeren { useEffect, useState } van'Reageer';
exporterenstandaardfunctieThuis() {
const [data, setData] = useState("");
 gebruikEffect(() => {
 ophalen(' https://api.example.com/data');
 .Dan( (antwoord) => reactie.json() )
 .Dan( (gegevens) => setData (gegevens) )
 }, []); 
opbrengst (


 {data.naam}
 </div>
 )
}

Dit codeblok gebruikt de useEffect-hook om gegevens op te halen van een API. If geeft twee parameters door aan de useEffect hook: een functie om de gegevens op te halen en een afhankelijkheidsmatrix. Bij succes gebruikt het setData() om de status van het onderdeel bij te werken met de gegevens die het ophaalverzoek retourneert.

De afhankelijkheidsmatrix die u doorgeeft aan de useEffect-hook moet de waarde bevatten waarvan het effect afhankelijk is. De component voert het effect alleen opnieuw uit wanneer de waarde in de afhankelijkheidsmatrix verandert. Als de afhankelijkheidsmatrix leeg is, zoals in dit voorbeeld, wordt het effect alleen uitgevoerd bij de eerste weergave.

Automatische verlenging afhandelen met behulp van SWR

De SWR (stale-while-revalidate) bibliotheek is een React hook-bibliotheek voor het afhandelen van het ophalen van gegevens. Je moet stel de SWR-bibliotheek in eerst om het in uw Next-toepassing te gebruiken.

Een van de belangrijkste kenmerken van de SWR-bibliotheek is de mogelijkheid om gegevensrevalidatie te automatiseren. Deze functie is essentieel wanneer gegevens regelmatig worden bijgewerkt en u deze consistent up-to-date wilt houden. Deze functionaliteit zorgt ervoor dat uw applicatie altijd toegang heeft tot de meest actuele gegevens, waardoor deze dynamischer wordt en sneller reageert op uw gebruikers.

De SWR-bibliotheek stuurt een nieuw ophaalverzoek naar een API wanneer een gebruiker zich opnieuw op een pagina richt of tussen tabbladen schakelt. Wanneer een gebruiker een pagina verlaat, worden de gegevens die op het scherm worden weergegeven verouderd. Wanneer ze terugkeren naar de pagina, stuurt de SWR-bibliotheek een nieuw ophaalverzoek naar de API en vergelijkt de nieuwe gegevens met de verouderde gegevens om te bepalen of deze zijn gewijzigd.

Om te voorkomen dat de SWR-bibliotheek deze actie uitvoert, kunt u de revalidateOnFocus keuze.

Zoals zo:

const { gegevens, fout, isLoading } = gebruikSWR(' https://api.example.com/data', ophaler, {
 opnieuw validerenOnFocus: vals,
})

Als u de eigenschap revalidateOnFocus instelt op false, zorgt u ervoor dat de SWR-bibliotheek uw gegevens niet elke keer opnieuw valideert wanneer u zich opnieuw op de pagina concentreert.

De SWR-bibliotheek valideert ook gegevens opnieuw wanneer een gebruiker opnieuw verbinding maakt met internet. Deze actie kan in bepaalde situaties zeer nuttig zijn en werkt automatisch.

Om de actie uit te schakelen, kunt u de revalidateOnReconnect keuze:

const { gegevens, fout, isLoading } = gebruikSWR(' https://api.example.com/data', ophaler, {
 revalidateOnReconnect: vals,
})

Als u automatische hervalidatie van uw gegevens wilt uitschakelen, stelt u zowel de eigenschappen revalidateOnFocus als revalidateOnRecconect in op false.

De Isomorphic-Unfetch-bibliotheek gebruiken om ophaalverzoeken uit te voeren

De isomorf-unfetch bibliotheek is een kleine, lichtgewicht bibliotheek die ophaalverzoeken kan uitvoeren in een Next.js-toepassing. De bibliotheek is een uitstekend alternatief voor de inboorling ophalen API. Het is eenvoudig te gebruiken, wat het perfect maakt voor ontwikkelaars die nieuw zijn in het maken van ophaalverzoeken.

U kunt isomorphic-unfetch gebruiken als een polyfill voor oudere browsers die de native fetch-API niet ondersteunen. De isomorphic-unfetch-bibliotheek is minimalistisch en geschikt voor het werken aan kleine applicaties.

Om isomorphic-unfetch te gebruiken in een Next.js-toepassing, installeert u de bibliotheek door de volgende opdracht uit te voeren:

npm install isomorphic-unfetch

U kunt de bibliotheek vervolgens importeren en in uw component gebruiken om gegevens op te halen, zoals dit:

importeren Ophalen van'isomorphic-unfetch'
importeren {useState, useEffect} van'Reageer'
exporterenstandaardfunctieThuis() {
const [data, setData] = useState(nul)
 gebruikEffect(() => {
 Ophalen(' https://api.example.com/data')
 .Dan( (antwoord) => reactie.json)
 .Dan( (gegevens) => setData (gegevens) )
 }, [])

als (!gegevens) opbrengst<div>Bezig met laden...div>
opbrengst (


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

De isomorphic-unfetch-functie werkt zowel aan de client- als aan de serverzijde.

Efficiënt ophalen van gegevens met Next.js

Het ophalen van gegevens is een belangrijke functie bij het ontwikkelen van applicaties. Next.js biedt verschillende manieren om gegevens op te halen, die elk hun voordelen en nadelen hebben.

Overweeg bij het kiezen van de te gebruiken methode de afwegingen en zorg ervoor dat u een techniek gebruikt waarmee u vertrouwd bent.