Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Next.js je robustní framework, který umožňuje vývojářům rychle vytvářet aplikace React vykreslované na straně serveru. Má různé základní vlastnosti. Jednou z jeho klíčových vlastností je schopnost snadno načítat data a zpřístupnit je komponentám.

Načítání dat je základní funkcí, která umožňuje vývojářům získávat a zobrazovat data na webu/webové aplikaci. Existuje několik různých způsobů, jak načíst data v Next.js, každý má své výhody a případy použití. Tento článek prozkoumá různé způsoby načítání dat v Next.js.

Využití háku useEffect k načítání dat

The useEffect hák je a React hook používaný k provádění vedlejších účinků, jako jsou volání API v komponentách. K načtení dat v Next.js můžete použít háček useEffect.

Tento háček je užitečný pro stránky, které potřebují dynamická data, jako jsou stránky uživatelských profilů, které zobrazují informace specifické pro přihlášeného uživatele.

instagram viewer

Chcete-li použít háček useEffect, nejprve jej importujte do zvolené komponenty, načtěte data a pomocí nich vykreslete stránku.

Například:

import { useEffect, useState } z'reagovat';
vývoznívýchozífunkceDomov() {
konst [data, setData] = useState("");


 useEffect(() => {
 vynést(' https://api.example.com/data');
 .pak( (Odezva) => response.json())
 .pak( (data) => setData (data) )
 }, []); 
vrátit se (


 {data.name}
 </div>
 )
}

Tento blok kódu používá háček useEffect k načítání dat z rozhraní API. If předá háku useEffect dva parametry: funkci pro načtení dat a pole závislostí. Při úspěchu využívá setData() k aktualizaci stavu komponenty pomocí dat, která požadavek načtení vrátí.

Pole závislostí, které předáte háku useEffect, by mělo obsahovat hodnotu, na které závisí efekt. Komponenta znovu spustí efekt pouze tehdy, když se změní hodnota v poli závislostí. Pokud je pole závislostí prázdné – jako v tomto příkladu – efekt se spustí pouze při prvním vykreslení.

Manipulace s automatickou revalidací pomocí SWR

The SWR (stale-while-revalidate) knihovna je háková knihovna React pro manipulaci s načítáním dat. Musíš nastavit knihovnu SWR nejprve jej použít ve vaší další aplikaci.

Jednou z klíčových funkcí knihovny SWR je její schopnost automatizovat revalidaci dat. Tato funkce je nezbytná, když se data často aktualizují a potřebujete, aby byla neustále aktuální. Tato funkce zajišťuje, že vaše aplikace bude mít vždy přístup k nejaktuálnějším datům, díky čemuž bude dynamičtější a bude reagovat na vaše uživatele.

Knihovna SWR odešle nový požadavek na načtení do API, když se uživatel znovu zaměří na stránku nebo přepne mezi kartami. Když uživatel opustí stránku, data zobrazená na obrazovce se stanou zastaralými. Když se vrátí na stránku, knihovna SWR odešle nový požadavek na načtení do API a porovná nová data se zastaralými daty, aby zjistila, zda se změnila.

Chcete-li zabránit knihovně SWR v provádění této akce, můžete použít revalidateOnFocus volba.

Jako tak:

konst { data, chyba, isLoading } = useSWR(' https://api.example.com/data', načítání, {
 revalidateOnFocus: Nepravdivé,
})

Nastavení vlastnosti revalidateOnFocus na false zajistí, že knihovna SWR nebude znovu validovat vaše data pokaždé, když se znovu zaměříte na stránku.

Knihovna SWR také znovu ověřuje data, kdykoli se uživatel znovu připojí k internetu. Tato akce může být v určitých situacích velmi užitečná a funguje automaticky.

Chcete-li akci zakázat, můžete použít revalidateOnReconnect volba:

konst { data, chyba, isLoading } = useSWR(' https://api.example.com/data', načítání, {
 revalidateOnReconnect: Nepravdivé,
})

Chcete-li zakázat automatickou revalidaci vašich dat, nastavte vlastnosti revalidateOnFocus i revalidateOnRecconec na hodnotu false.

Použití knihovny Isomorphic-Unfetch k provádění požadavků načítání

The isomorphic-unfetch knihovna je malá, lehká knihovna, která může provádět požadavky na načítání v aplikaci Next.js. Knihovna je vynikající alternativou k nativní vynést API. Jeho použití je jednoduché, díky čemuž je ideální pro vývojáře, kteří začínají s požadavky na načítání.

Isomorphic-unfetch můžete použít jako polyfill pro starší prohlížeče, které nepodporují nativní API pro načítání. Knihovna isomorphic-unfetch je minimalistická a vhodná pro práci na malých aplikacích.

Chcete-li použít isomorphic-unfetch v aplikaci Next.js, nainstalujte knihovnu spuštěním následujícího příkazu:

npm install isomorphic-unfetch

Poté můžete importovat knihovnu a použít ji ve vaší komponentě k načtení dat, takto:

import Vynést z'isomorphic-unfetch'
import {useState, useEffect} z'reagovat'
vývoznívýchozífunkceDomov() {
konst [data, setData] = useState(nula)


 useEffect(() => {
 Vynést(' https://api.example.com/data')
 .pak( (Odezva) => response.json)
 .pak( (data) => setData (data) )
 }, [])

-li (!data) vrátit se<div>Načítání...div>
vrátit se (


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

Funkce isomorphic-unfetch funguje na straně klienta i na straně serveru.

Efektivní načítání dat pomocí Next.js

Načítání dat je důležitou funkcí při vývoji aplikací. Next.js poskytuje několik způsobů načítání dat, z nichž každý má své výhody a nevýhody.

Při rozhodování o metodě použití zvažte kompromisy a ujistěte se, že používáte techniku, která vám vyhovuje.