Next.js er en robust ramme, der giver udviklere mulighed for hurtigt at bygge server-side-renderede React-applikationer. Det har forskellige væsentlige funktioner. En af dens nøglefunktioner er dens evne til nemt at hente data og gøre det let tilgængeligt for komponenterne.

Datahentning er en væsentlig funktion, der gør det muligt for udviklere at hente og vise data på en hjemmeside/webapplikation. Der er et par forskellige måder at hente data i Next.js, hver med sine fordele og anvendelsesmuligheder. Denne artikel vil udforske forskellige måder at hente data i Next.js.

Brug af useEffect Hook til at hente data

Det useEffect krog er en React hook bruges til at udføre bivirkninger, såsom API-kald i komponenter. Du kan bruge useEffect-krogen til at hente data i Next.js.

Denne hook er nyttig til sider, der har brug for dynamiske data, som f.eks. brugerprofilsider, der viser specifikke oplysninger for den bruger, der er logget ind.

For at bruge useEffect-hooken skal du først importere den til din valgte komponent, hente dataene og gengive din side ved hjælp af den.

For eksempel:

importere { useEffect, useState } fra'reagere';
eksportStandardfungereHjem() {
konst [data, setData] = useState("");
 useEffect(() => {
 hente(' https://api.example.com/data');
 .derefter( (respons) => response.json() )
 .derefter( (data) => setData (data) )
 }, []); 
Vend tilbage (


 {data.name}
 </div>
 )
}

Denne kodeblok bruger useEffect-krogen til at hente data fra en API. If sender to parametre til useEffect-krogen: en funktion til at hente data og et afhængighedsarray. På succes, det bruger setData() for at opdatere komponentens tilstand med de data, som henteanmodningen returnerer.

Det afhængighedsarray, du sender til useEffect-hooken, skal indeholde den værdi, som effekten afhænger af. Komponenten vil kun køre effekten igen, når værdien i afhængighedsarrayet ændres. Hvis afhængighedsarrayet er tomt - som i dette eksempel - vil effekten kun køre på den første gengivelse.

Håndtering af automatisk revalidering ved hjælp af SWR

Det SWR (stale-while-revalidate) bibliotek er et React hook-bibliotek til håndtering af datahentning. Du må opsætte SWR-biblioteket først for at bruge det i din Next-applikation.

En af SWR-bibliotekets nøglefunktioner er dets evne til at automatisere datagenvalidering. Denne funktion er vigtig, når data opdateres ofte, og du har brug for, at den konstant er opdateret. Denne funktionalitet sikrer, at din applikation altid har adgang til de nyeste data, hvilket gør den mere dynamisk og lydhør over for dine brugere.

SWR-biblioteket laver en ny hentningsanmodning til en API, når en bruger fokuserer igen på en side eller skifter mellem faner. Når en bruger forlader en side, bliver de data, der vises på skærmen, forældede. Når de vender tilbage til siden, sender SWR-biblioteket en ny hentningsanmodning til API'et og sammenligner de nye data med de forældede data for at afgøre, om de har ændret sig.

For at forhindre SWR-biblioteket i at udføre denne handling, kan du bruge revalidateOnFocus mulighed.

Ligesom:

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

Indstilling af egenskaben revalidateOnFocus til false sikrer, at SWR-biblioteket ikke genvaliderer dine data, hver gang du fokuserer igen på siden.

SWR-biblioteket genvaliderer også data, hver gang en bruger genopretter forbindelse til internettet. Denne handling kan være meget nyttig i visse situationer og fungerer automatisk.

For at deaktivere handlingen kan du bruge revalidateOnReconnect mulighed:

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

For at deaktivere automatisk genvalidering af dine data skal du indstille både egenskaberne revalidateOnFocus og revalidateOnRecconect til false.

Brug af Isomorphic-Unfetch Library til at udføre hentningsanmodninger

Det isomorphic-unfetch library er et lille, let bibliotek, der kan udføre hentningsanmodninger i en Next.js-applikation. Biblioteket er et glimrende alternativ til den indfødte hente API. Det er nemt at bruge, hvilket gør det perfekt til udviklere, der ikke er begyndt at lave hentingsanmodninger.

Du kan bruge isomorphic-unfetch som en polyfill til ældre browsere, der ikke understøtter den native fetch API. Det isomorphic-unfetch-bibliotek er minimalistisk og velegnet til at arbejde med små applikationer.

For at bruge isomorphic-unfetch i en Next.js-applikation skal du installere biblioteket ved at køre følgende kommando:

npm installer isomorphic-unfetch

Du kan derefter importere biblioteket og bruge det i din komponent til at hente data, sådan her:

importere Hent fra'isomorphic-unfetch'
importere {useState, useEffect} fra'reagere'
eksportStandardfungereHjem() {
konst [data, setData] = useState(nul)
 useEffect(() => {
 Hent(' https://api.example.com/data')
 .derefter( (respons) => response.json)
 .derefter( (data) => setData (data) )
 }, [])

hvis (!data) Vend tilbage<div>Indlæser...div>
Vend tilbage (


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

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

Effektiv datahentning med Next.js

Datahentning er en vigtig funktion ved udvikling af applikationer. Next.js giver flere måder at hente data på, som hver har sine fordele og afvejninger.

Når du beslutter dig for, hvilken metode du skal bruge, skal du overveje afvejningerne og sikre, at du bruger en teknik, du er fortrolig med.