Next.js je robustný rámec, ktorý umožňuje vývojárom rýchlo vytvárať aplikácie React vykresľované na strane servera. Má rôzne podstatné vlastnosti. Jednou z jeho kľúčových vlastností je jeho schopnosť jednoducho načítať údaje a sprístupniť ich komponentom.

Načítanie údajov je základná funkcia, ktorá umožňuje vývojárom získavať a zobrazovať údaje na webovej lokalite/webovej aplikácii. Existuje niekoľko rôznych spôsobov načítania údajov v súbore Next.js, pričom každý má svoje výhody a prípady použitia. Tento článok preskúma rôzne spôsoby načítania údajov v súbore Next.js.

Používanie háku useEffect na načítanie údajov

The useEffect hák je a React hook používaný na vykonávanie vedľajších účinkov, ako sú volania API v komponentoch. Hák useEffect môžete použiť na načítanie údajov v súbore Next.js.

Tento háčik je užitočný pre stránky, ktoré potrebujú dynamické údaje, ako sú stránky profilu používateľa, ktoré zobrazujú informácie konkrétne pre prihláseného používateľa.

Ak chcete použiť hák useEffect, najprv ho importujte do komponentu podľa vlastného výberu, načítajte údaje a pomocou nich vykreslíte svoju stránku.

Napríklad:

importovať { useEffect, useState } od'reagovať';
exportpredvolenáfunkciuDomov() {
konšt [data, setData] = useState("");
 useEffect(() => {
 priniesť (' https://api.example.com/data');
 .potom( (odpoveď) => response.json() )
 .potom( (údajov) => setData (dáta) )
 }, []); 
vrátiť (


 {data.name}
 </div>
 )
}

Tento blok kódu používa háčik useEffect na načítanie údajov z rozhrania API. If odovzdá háku useEffect dva parametre: funkciu na načítanie údajov a pole závislostí. Na úspech využíva setData() aktualizovať stav komponentu údajmi, ktoré vráti žiadosť o načítanie.

Pole závislostí, ktoré prenesiete do háku useEffect, by malo obsahovať hodnotu, od ktorej závisí efekt. Komponent znovu spustí efekt iba vtedy, keď sa zmení hodnota v poli závislostí. Ak je pole závislostí prázdne – ako v tomto príklade – efekt sa spustí len pri prvom vykreslení.

Manipulácia s automatickou revalidáciou pomocou SWR

The SWR (stale-while-revalidate) knižnica je háková knižnica React na spracovanie získavania údajov. Ty musíš nastaviť knižnicu SWR najprv ho použiť vo svojej ďalšej aplikácii.

Jednou z kľúčových funkcií knižnice SWR je jej schopnosť automatizovať revalidáciu údajov. Táto funkcia je nevyhnutná, keď sa údaje často aktualizujú a potrebujete, aby boli neustále aktuálne. Táto funkcia zaisťuje, že vaša aplikácia má vždy prístup k najaktuálnejším údajom, vďaka čomu je dynamickejšia a pohotovejšia pre vašich používateľov.

Knižnica SWR odošle novú požiadavku na načítanie do API, keď sa používateľ znova zameria na stránku alebo prepne medzi kartami. Keď používateľ opustí stránku, údaje zobrazené na obrazovke zastarajú. Keď sa vrátia na stránku, knižnica SWR odošle novú požiadavku na načítanie do API a porovná nové údaje so zastaranými údajmi, aby zistila, či sa zmenili.

Ak chcete zabrániť tomu, aby knižnica SWR vykonala túto akciu, môžete použiť revalidateOnFocus možnosť.

Ako:

konšt { data, error, isLoading } = useSWR(' https://api.example.com/data', fetcher, {
 revalidateOnFocus: falošný,
})

Nastavenie vlastnosti revalidateOnFocus na hodnotu false zaistí, že knižnica SWR nebude znova overovať vaše údaje pri každom opätovnom zameraní na stránku.

Knižnica SWR tiež prehodnocuje údaje vždy, keď sa používateľ znova pripojí k internetu. Táto akcia môže byť v určitých situáciách veľmi užitočná a funguje automaticky.

Ak chcete akciu zakázať, môžete použiť revalidateOnReconnect možnosť:

konšt { data, error, isLoading } = useSWR(' https://api.example.com/data', fetcher, {
 revalidateOnReconnect: falošný,
})

Ak chcete zakázať automatickú revalidáciu vašich údajov, nastavte vlastnosti revalidateOnFocus aj revalidateOnRecconct na hodnotu false.

Použitie knižnice Isomorphic-Unfetch na vykonávanie požiadaviek na načítanie

The izomorfný-nevytiahnutý knižnica je malá, ľahká knižnica, ktorá môže vykonávať požiadavky na načítanie v aplikácii Next.js. Knižnica je vynikajúcou alternatívou k domorodcom aport API. Je jednoduchý na používanie, vďaka čomu je ideálny pre vývojárov, ktorí začínajú s požiadavkami na načítanie.

Isomorphic-unfetch môžete použiť ako polyfill pre staršie prehliadače, ktoré nepodporujú natívne rozhranie API na načítanie. Knižnica isomorphic-unfetch je minimalistická a vhodná na prácu na malých aplikáciách.

Ak chcete použiť isomorphic-unfetch v aplikácii Next.js, nainštalujte knižnicu spustením nasledujúceho príkazu:

npm install isomorphic-unfetch

Potom môžete importovať knižnicu a použiť ju vo svojom komponente na načítanie údajov takto:

importovať Načítať od'isomorphic-unfetch'
importovať {useState, useEffect} od'reagovať'
exportpredvolenáfunkciuDomov() {
konšt [data, setData] = useState(nulový)
 useEffect(() => {
 Načítať (' https://api.example.com/data')
 .potom( (odpoveď) => response.json)
 .potom( (údajov) => setData (dáta) )
 }, [])

ak (!údaje) vrátiť<div>Načítava...div>
vrátiť (


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

Funkcia isomorphic-unfetch funguje na strane klienta aj na strane servera.

Efektívne načítanie údajov pomocou Next.js

Načítanie údajov je dôležitou funkciou pri vývoji aplikácií. Next.js poskytuje niekoľko spôsobov načítania údajov, z ktorých každý má svoje výhody a nevýhody.

Pri rozhodovaní o spôsobe použitia zvážte kompromisy a uistite sa, že používate techniku, ktorá vám vyhovuje.