Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A Next.js egy robusztus keretrendszer, amely lehetővé teszi a fejlesztők számára, hogy gyorsan kiszolgálóoldali React-alkalmazásokat készítsenek. Különféle alapvető tulajdonságokkal rendelkezik. Egyik legfontosabb jellemzője, hogy könnyen lekéri az adatokat, és könnyen elérhetővé teszi az összetevők számára.

Az adatlekérés alapvető funkció, amely lehetővé teszi a fejlesztők számára, hogy adatokat kérjenek le és jelenítsenek meg egy webhelyen/webalkalmazáson. A Next.js-ben többféleképpen is lekérheti az adatokat, mindegyiknek megvannak a maga előnyei és használati esetei. Ez a cikk a Next.js-ben található adatok lekérésének különböző módjait tárgyalja.

A useEffect Hook használata az adatok lekéréséhez

A useEffect horog egy A mellékhatások kiváltására használt reakciókampó, mint például az API-hívások az összetevőkben. A useEffect hook segítségével lekérheti az adatokat a Next.js fájlban.

instagram viewer

Ez a hook olyan oldalaknál hasznos, amelyek dinamikus adatokat igényelnek, például olyan felhasználói profiloldalaknál, amelyek a bejelentkezett felhasználóra jellemző információkat jelenítenek meg.

A useEffect hook használatához először importálja azt a választott összetevőbe, lekéri az adatokat, és ennek segítségével jeleníti meg az oldalt.

Például:

import { useEffect, useState } tól től'reagál';
exportalapértelmezettfunkcióitthon() {
const [data, setData] = useState("");


 useEffect(() => {
 fetch(' https://api.example.com/data');
 .akkor( (válasz) => válasz.json() )
 .akkor( (adat) => setData (adat) )
 }, []); 
Visszatérés (


 {data.name}
 </div>
 )
}

Ez a kódblokk a useEffect hook segítségével kéri le az adatokat egy API-ból. Az If két paramétert ad át a useEffect hook-nak: egy függvényt az adatok lekéréséhez és egy függőségi tömböt. Sikerre használ setData() hogy frissítse az összetevő állapotát a lekérési kérelem által visszaadott adatokkal.

A useEffect hook-nak átadott függőségi tömbnek tartalmaznia kell azt az értéket, amelytől az effekt függ. A komponens csak akkor futtatja újra az effektust, ha a függőségi tömb értéke megváltozik. Ha a függőségi tömb üres – mint ebben a példában –, a hatás csak az első renderelésen fut le.

Automatikus újraérvényesítés kezelése SWR használatával

A SWR A (stale-while-revalidate) könyvtár egy React hook-könyvtár az adatok lekérésének kezelésére. Neked muszáj állítsa be az SWR könyvtárat először, hogy a Következő alkalmazásban használja.

Az SWR-könyvtár egyik legfontosabb jellemzője az adatok újraellenőrzésének automatizálása. Ez a funkció elengedhetetlen, ha az adatok gyakran frissülnek, és folyamatosan naprakésznek kell lennie. Ez a funkció biztosítja, hogy az alkalmazás mindig hozzáférjen a legfrissebb adatokhoz, így dinamikusabb és érzékenyebb lesz a felhasználók számára.

Az SWR-könyvtár új lekérési kérelmet küld egy API-nak, amikor a felhasználó újra egy oldalra fókuszál, vagy vált a lapok között. Amikor a felhasználó elhagyja az oldalt, a képernyőn megjelenő adatok elavulttá válnak. Amikor visszatérnek az oldalra, az SWR könyvtár új lekérési kérelmet küld az API-nak, és összehasonlítja az új adatokat az elavult adatokkal, hogy megállapítsa, változtak-e.

Ha meg szeretné akadályozni, hogy az SWR könyvtár végrehajtsa ezt a műveletet, használja a revalidateOnFocus választási lehetőség.

Például így:

const { data, error, isloading } = useSWR(' https://api.example.com/data', fetcher, {
 revalidateOnFocus: hamis,
})

A revalidateOnFocus tulajdonság false értékre állítása biztosítja, hogy az SWR-könyvtár ne érvényesítse újra az adatokat minden alkalommal, amikor újra az oldalra fókuszál.

Az SWR könyvtár az adatokat is újraellenőrzi, amikor a felhasználó újra csatlakozik az internethez. Ez a művelet bizonyos helyzetekben nagyon hasznos lehet, és automatikusan működik.

A művelet letiltásához használhatja a revalidateOnReconnect választási lehetőség:

const { data, error, isloading } = useSWR(' https://api.example.com/data', fetcher, {
 revalidateOnReconnect: hamis,
})

Az adatok automatikus újraellenőrzésének letiltásához állítsa a revalidateOnFocus és a revalidateOnRecconect tulajdonságokat is false értékre.

Az Isomorphic-Unfetch Library használata letöltési kérések végrehajtására

A izomorf-unfetch A könyvtár egy kicsi, könnyű könyvtár, amely lekérési kéréseket tud végrehajtani a Next.js alkalmazásokban. A könyvtár kiváló alternatívája a bennszülötteknek elhozni API. Használata egyszerű, így tökéletes azoknak a fejlesztőknek, akik még nem tudnak lekérési kéréseket készíteni.

Az isomorphic-unfetch polifillként használható olyan régebbi böngészőkhöz, amelyek nem támogatják a natív lekérési API-t. Az isomorphic-unfetch könyvtár minimalista és alkalmas kis alkalmazásokhoz.

Az isomorphic-unfetch használatához egy Next.js alkalmazásban, telepítse a könyvtárat a következő parancs futtatásával:

npm install isomorphic-unfetch

Ezután importálhatja a könyvtárat, és felhasználhatja az összetevőben adatok lekérésére, például:

import Fetch tól től"izomorf-unfetch"
import {useState, useEffect} tól től'reagál'
exportalapértelmezettfunkcióitthon() {
const [data, setData] = useState(nulla)


 useEffect(() => {
 Fetch(' https://api.example.com/data')
 .akkor( (válasz) => válasz.json)
 .akkor( (adat) => setData (adat) )
 }, [])

ha (!adat) Visszatérés<div>Betöltés...div>
Visszatérés (


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

Az isomorphic-unfetch funkció a kliens és a szerver oldalon is működik.

Hatékony adatlekérés a Next.js segítségével

Az adatok lekérése fontos funkció az alkalmazások fejlesztése során. A Next.js számos módot kínál az adatok lekérésére, amelyek mindegyikének megvannak a maga előnyei és kompromisszumai.

Amikor kiválasztja a használni kívánt módszert, vegye figyelembe a kompromisszumokat, és győződjön meg arról, hogy olyan technikát használ, amely kényelmes.