Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Next.js yra tvirta sistema, leidžianti kūrėjams greitai sukurti serverio pusėje pateiktas „React“ programas. Jis turi įvairių esminių savybių. Viena iš pagrindinių jo savybių yra galimybė lengvai gauti duomenis ir padaryti juos lengvai prieinamus komponentams.

Duomenų gavimas yra esminė funkcija, leidžianti kūrėjams nuskaityti ir rodyti duomenis svetainėje / žiniatinklio programoje. Yra keletas skirtingų būdų, kaip gauti duomenis Next.js, kiekvienas turi savo privalumų ir naudojimo atvejų. Šiame straipsnyje bus nagrinėjami įvairūs duomenų gavimo Next.js būdai.

Naudojant „useEffect Hook“ duomenims gauti

The naudojimoEfektas kabliukas yra a Reakcijos kabliukas, naudojamas šalutiniam poveikiui sukelti, pvz., API iškvietimai komponentuose. Norėdami gauti duomenis iš Next.js, galite naudoti kabliuką useEffect.

Šis kabliukas yra naudingas puslapiams, kuriems reikia dinaminių duomenų, pvz., naudotojo profilio puslapiuose, kuriuose rodoma informacija apie prisijungusį vartotoją.

instagram viewer

Norėdami naudoti „useEffect Hook“, pirmiausia importuokite jį į pasirinktą komponentą, gaukite duomenis ir naudodami jį atvaizduokite puslapį.

Pavyzdžiui:

importuoti { useEffect, useState } iš'reaguoti';
eksportuotinumatytasfunkcijaNamai() {
konst [duomenys, setData] = useState("");


 useEffect (() => {
 atnešti (' https://api.example.com/data');
 .thena( (atsakymą) => response.json() )
 .thena( (duomenis) => setData (duomenys) )
 }, []); 
grąžinti (


 {data.name}
 </div>
 )
}

Šis kodo blokas naudoja „useEffect Hook“, kad gautų duomenis iš API. If perduoda du parametrus useEffect kabliui: funkciją duomenims gauti ir priklausomybės masyvą. Dėl sėkmės jis naudojasi setData() atnaujinti komponento būseną duomenimis, kuriuos pateikia gavimo užklausa.

Priklausomybės masyve, kurį perduodate į useEffect kabliuką, turi būti reikšmė, nuo kurios priklauso efektas. Komponentas iš naujo veiks tik tada, kai pasikeis priklausomybės masyvo reikšmė. Jei priklausomybės masyvas tuščias (kaip šiame pavyzdyje), efektas bus vykdomas tik pirmą kartą pateikiant.

Automatinio patvirtinimo pratęsimas naudojant SWR

The SWR (pasenusi, o pakartotinai patvirtinti) biblioteka yra „React Hook“ biblioteka, skirta duomenų gavimui tvarkyti. Tu privalai įsteigti SWR biblioteką pirma, norėdami jį naudoti kitoje programoje.

Viena iš pagrindinių SWR bibliotekos savybių yra galimybė automatizuoti duomenų pakartotinį patvirtinimą. Ši funkcija yra būtina, kai duomenys atnaujinami dažnai ir jums reikia, kad jie būtų nuolat atnaujinami. Ši funkcija užtikrina, kad jūsų programa visada turės prieigą prie naujausių duomenų, todėl ji bus dinamiškesnė ir labiau reaguoja į jūsų naudotojus.

SWR biblioteka pateikia naują API gavimo užklausą, kai vartotojas iš naujo sutelkia dėmesį į puslapį arba perjungia skirtukus. Kai vartotojas palieka puslapį, ekrane rodomi duomenys pasensta. Kai jie grįžta į puslapį, SWR biblioteka siunčia naują gavimo užklausą API ir lygina naujus duomenis su pasenusiais duomenimis, kad nustatytų, ar jie pasikeitė.

Norėdami neleisti SWR bibliotekai atlikti šį veiksmą, galite naudoti revalidateOnFocus variantas.

Kaip taip:

konst { duomenys, klaida, įkeliama } = useSWR(' https://api.example.com/data', atnešėjas, {
 revalidateOnFocus: klaidinga,
})

Nustačius ypatybę revalidateOnFocus į false, SWR biblioteka nepatvirtins jūsų duomenų kiekvieną kartą, kai iš naujo sutelkiate dėmesį į puslapį.

SWR biblioteka taip pat iš naujo patvirtina duomenis, kai vartotojas vėl prisijungia prie interneto. Šis veiksmas gali būti labai naudingas tam tikrose situacijose ir veikia automatiškai.

Norėdami išjungti veiksmą, galite naudoti revalidateOnReconnect variantas:

konst { duomenys, klaida, įkeliama } = useSWR(' https://api.example.com/data', atnešėjas, {
 revalidateOnReconnect: klaidinga,
})

Norėdami išjungti automatinį duomenų pakartotinį patvirtinimą, ypatybes revalidateOnFocus ir revalidateOnRecconect nustatykite į false.

Izomorfinės atšaukimo bibliotekos naudojimas gavimo užklausoms atlikti

The izomorfinis-atnešamas biblioteka yra maža, lengva biblioteka, kuri gali atlikti gavimo užklausas Next.js programoje. Biblioteka yra puiki alternatyva vietinei atnešti API. Jį paprasta naudoti, todėl jis puikiai tinka kūrėjams, kurie pradeda teikti užklausas.

Galite naudoti „isomorphic-unfetch“ kaip daugialypį užpildymą senesnėms naršyklėms, kurios nepalaiko savosios gavimo API. Izomorfinė-atnešimo biblioteka yra minimalistinė ir tinkama dirbti su mažomis programomis.

Norėdami naudoti „isomorphic-unfetch“ programoje Next.js, įdiekite biblioteką vykdydami šią komandą:

npm įdiegti isomorphic-unfetch

Tada galite importuoti biblioteką ir naudoti ją savo komponente duomenims gauti, pavyzdžiui:

importuoti Atnešti iš„izomorfinis-atnešimas“
importuoti {useState, useEffect} iš'reaguoti'
eksportuotinumatytasfunkcijaNamai() {
konst [duomenys, setData] = useState(nulinis)


 useEffect (() => {
 Paimti (' https://api.example.com/data')
 .thena( (atsakymą) => atsakymas.json)
 .thena( (duomenis) => setData (duomenys) )
 }, [])

jeigu (!duomenys) grąžinti<div>Įkeliama...div>
grąžinti (


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

Izomorfinio atšaukimo funkcija veikia tiek kliento, tiek serverio pusėje.

Efektyvus duomenų gavimas naudojant Next.js

Duomenų gavimas yra svarbi funkcija kuriant programas. Next.js pateikia kelis duomenų gavimo būdus, kurių kiekvienas turi savo privalumų ir kompromisų.

Kai nuspręsite, kokį metodą naudoti, atsižvelkite į kompromisus ir įsitikinkite, kad naudojate jums patogią techniką.