Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Next.js er et robust rammeverk som lar utviklere raskt bygge server-side gjengitte React-applikasjoner. Den har ulike viktige funksjoner. En av nøkkelfunksjonene er dens evne til enkelt å hente data og gjøre det lett tilgjengelig for komponentene.

Datahenting er en viktig funksjon som lar utviklere hente og vise data på en nettside/nettapplikasjon. Det er noen forskjellige måter å hente data i Next.js, hver med sine fordeler og brukstilfeller. Denne artikkelen vil utforske forskjellige måter å hente data i Next.js.

Bruk av useEffect-kroken for å hente data

De useEffect krok er en React krok brukes til å utføre bivirkninger, som API-kall i komponenter. Du kan bruke useEffect-kroken til å hente data i Next.js.

Denne kroken er nyttig for sider som trenger dynamiske data, som brukerprofilsider som viser informasjon spesielt for brukeren som er pålogget.

instagram viewer

For å bruke useEffect-kroken, importerer du den først til den valgte komponenten, henter dataene og gjengir siden din ved å bruke den.

For eksempel:

import { useEffect, useState } fra'reagere';
eksportmisligholdefunksjonHjem() {
konst [data, setData] = useState("");


 useEffect(() => {
 hente(' https://api.example.com/data');
 .deretter( (respons) => response.json() )
 .deretter( (data) => setData (data) )
 }, []); 
komme tilbake (


 {data.name}
 </div>
 )
}

Denne kodeblokken bruker useEffect-kroken for å hente data fra et API. If sender to parametere til useEffect-kroken: en funksjon for å hente dataene og en avhengighetsmatrise. På suksess, bruker den setData() for å oppdatere komponentens tilstand med dataene henteforespørselen returnerer.

Avhengighetsmatrisen du sender til useEffect-kroken skal inneholde verdien effekten avhenger av. Komponenten vil bare kjøre effekten på nytt når verdien i avhengighetsmatrisen endres. Hvis avhengighetsmatrisen er tom – som i dette eksemplet – vil effekten bare kjøre på den første gjengivelsen.

Håndtering av automatisk revalidering ved bruk av SWR

De SWR (stale-while-revalidate) library er et React hook-bibliotek for håndtering av datahenting. Du må sette opp SWR-biblioteket først for å bruke den i Neste-applikasjonen.

En av SWR-bibliotekets nøkkelfunksjoner er dens evne til å automatisere revalidering av data. Denne funksjonen er viktig når data oppdateres ofte og du trenger at den er konsekvent oppdatert. Denne funksjonaliteten sikrer at applikasjonen din alltid har tilgang til de nyeste dataene, noe som gjør den mer dynamisk og responsiv for brukerne dine.

SWR-biblioteket sender en ny henteforespørsel til et API når en bruker fokuserer på en side på nytt eller bytter mellom faner. Når en bruker forlater en side, blir dataene som vises på skjermen foreldet. Når de kommer tilbake til siden, sender SWR-biblioteket en ny henteforespørsel til API-en og sammenligner de nye dataene med de gamle dataene for å finne ut om de har endret seg.

For å stoppe SWR-biblioteket fra å utføre denne handlingen, kan du bruke revalidateOnFocus alternativ.

Som så:

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

Å sette egenskapen revalidateOnFocus til false vil sikre at SWR-biblioteket ikke revaliderer dataene dine hver gang du fokuserer på siden på nytt.

SWR-biblioteket revaliderer også data hver gang en bruker kobler seg til Internett på nytt. Denne handlingen kan være svært nyttig i visse situasjoner og fungerer automatisk.

For å deaktivere handlingen, kan du bruke revalidateOnReconnect alternativ:

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

For å deaktivere automatisk revalidering av dataene dine, sett både revalidateOnFocus- og revalidateOnRecconect-egenskapene til false.

Bruke Isomorphic-Unfetch Library til å utføre hentingsforespørsler

De isomorf-unfetch library er et lite, lett bibliotek som kan utføre hentingsforespørsler i en Next.js-applikasjon. Biblioteket er et utmerket alternativ til den innfødte hente API. Den er enkel å bruke, noe som gjør den perfekt for utviklere som ikke har begynt å hente henting.

Du kan bruke isomorphic-unfetch som en polyfill for eldre nettlesere som ikke støtter den native fetch API. Det isomorphic-unfetch-biblioteket er minimalistisk og egnet for arbeid med små applikasjoner.

For å bruke isomorphic-unfetch i en Next.js-applikasjon, installer biblioteket ved å kjøre følgende kommando:

npm installer isomorphic-unfetch

Du kan deretter importere biblioteket og bruke det i komponenten for å hente data, slik:

import Hent fra'isomorphic-unfetch'
import {useState, useEffect} fra'reagere'
eksportmisligholdefunksjonHjem() {
konst [data, setData] = useState(null)


 useEffect(() => {
 Hent(' https://api.example.com/data')
 .deretter( (respons) => response.json)
 .deretter( (data) => setData (data) )
 }, [])

hvis (!data) komme tilbake<div>Laster inn...div>
komme tilbake (


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

Funksjonen isomorphic-unfetch fungerer både på klientsiden og serversiden.

Effektiv datahenting med Next.js

Datahenting er en viktig funksjon ved utvikling av applikasjoner. Next.js gir flere måter å hente data på, som hver har sine fordeler og avveininger.

Når du bestemmer deg for hvilken metode du skal bruke, bør du vurdere avveiningene og sørge for at du bruker en teknikk du er komfortabel med.