Next.js este un cadru robust care permite dezvoltatorilor să construiască rapid aplicații React redate pe server. Are diverse caracteristici esențiale. Una dintre caracteristicile sale cheie este capacitatea de a prelua cu ușurință date și de a le face ușor disponibile componentelor.

Preluarea datelor este o caracteristică esențială care permite dezvoltatorilor să recupereze și să afișeze date pe un site web/aplicație web. Există câteva moduri diferite de a prelua date în Next.js, fiecare cu avantajele și cazurile de utilizare. Acest articol va explora diferite moduri de a prelua date în Next.js.

Utilizarea useEffect Hook pentru a prelua date

The useEffect cârligul este un Cârlig de reacție folosit pentru a produce efecte secundare, cum ar fi apelurile API în componente. Puteți utiliza cârligul useEffect pentru a prelua date în Next.js.

Acest cârlig este util pentru paginile care au nevoie de date dinamice, cum ar fi paginile de profil de utilizator care afișează informații specifice utilizatorului care este conectat.

Pentru a utiliza cârligul useEffect, mai întâi îl importați în componenta dorită, preluați datele și redați pagina folosindu-l.

De exemplu:

import { useEffect, useState } din'reacţiona';
exportMod implicitfuncţieAcasă() {
const [date, setData] = useState("");
 useEffect(() => {
 aduce(' https://api.example.com/data');
 .apoi( (raspuns) => response.json() )
 .apoi( (date) => setData (date) )
 }, []); 
întoarcere (


 {data.name}
 </div>
 )
}

Acest bloc de cod folosește cârligul useEffect pentru a prelua date dintr-un API. Dacă trece doi parametri cârligului useEffect: o funcție pentru a prelua datele și o matrice de dependențe. La succes, se folosește setData() pentru a actualiza starea componentei cu datele returnate de cererea de preluare.

Matricea de dependențe pe care o treceți la cârligul useEffect ar trebui să conțină valoarea de care depinde efectul. Componenta va rula din nou efectul numai atunci când valoarea din matricea de dependențe se schimbă. Dacă matricea de dependențe este goală - ca în acest exemplu - efectul se va rula doar la prima randare.

Gestionarea revalidării automate folosind SWR

The SWR Biblioteca (stale-while-revalidate) este o bibliotecă React hook pentru gestionarea preluării datelor. Trebuie să vă configurați biblioteca SWR mai întâi, pentru a-l folosi în aplicația următoare.

Una dintre caracteristicile cheie ale bibliotecii SWR este capacitatea sa de a automatiza revalidarea datelor. Această caracteristică este esențială atunci când datele se actualizează frecvent și aveți nevoie să fie actualizate în mod constant. Această funcționalitate asigură că aplicația dvs. are întotdeauna acces la cele mai actuale date, făcând-o mai dinamică și mai receptivă la utilizatorii dvs.

Biblioteca SWR face o nouă solicitare de preluare către un API atunci când un utilizator se concentrează din nou pe o pagină sau comută între file. Când un utilizator părăsește o pagină, datele afișate pe ecran devin învechite. Când revin la pagină, biblioteca SWR trimite o nouă solicitare de preluare către API și compară noile date cu datele învechite pentru a determina dacă s-au modificat.

Pentru a opri biblioteca SWR să efectueze această acțiune, puteți utiliza revalidateOnFocus opțiune.

Ca astfel:

const { date, error, isLoading } = useSWR(' https://api.example.com/data', aducător, {
 revalidateOnFocus: fals,
})

Setarea proprietății revalidateOnFocus la false vă va asigura că biblioteca SWR nu vă revalidează datele de fiecare dată când vă reorientați pe pagină.

De asemenea, biblioteca SWR revalidează datele ori de câte ori un utilizator se reconecta la internet. Această acțiune poate fi de mare ajutor în anumite situații și funcționează automat.

Pentru a dezactiva acțiunea, puteți utiliza revalidateOnReconnect opțiune:

const { date, error, isLoading } = useSWR(' https://api.example.com/data', aducător, {
 revalidateOnReconnect: fals,
})

Pentru a dezactiva revalidarea automată a datelor dvs., setați atât proprietățile revalidateOnFocus, cât și revalidateOnRecconect la false.

Utilizarea bibliotecii Isomorphic-Unfetch pentru a efectua cereri de preluare

The izomorfă-descărcată biblioteca este o bibliotecă mică, ușoară, care poate efectua cereri de preluare într-o aplicație Next.js. Biblioteca este o alternativă excelentă la nativ aduce API. Este simplu de utilizat, ceea ce îl face perfect pentru dezvoltatorii care nu fac cereri de preluare.

Puteți utiliza isomorphic-unfetch ca o completare polivalentă pentru browserele mai vechi care nu acceptă API-ul nativ de preluare. Biblioteca izomorfă-unfetch este minimalistă și potrivită pentru lucrul cu aplicații mici.

Pentru a utiliza isomorphic-unfetch într-o aplicație Next.js, instalați biblioteca rulând următoarea comandă:

npm install isomorphic-unfetch

Apoi puteți importa biblioteca și o puteți utiliza în componenta dvs. pentru a prelua date, astfel:

import Preluare din„izomorf-descărcați”
import {useState, useEffect} din'reacţiona'
exportMod implicitfuncţieAcasă() {
const [date, setData] = useState(nul)
 useEffect(() => {
 Preluare(' https://api.example.com/data')
 .apoi( (raspuns) => response.json)
 .apoi( (date) => setData (date) )
 }, [])

dacă (!date) întoarcere<div>Se încarcă...div>
întoarcere (


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

Funcția izomorfă-unfetch funcționează atât pe partea client, cât și pe partea serverului.

Preluare eficientă a datelor cu Next.js

Preluarea datelor este o caracteristică importantă atunci când se dezvoltă aplicații. Next.js oferă mai multe modalități de a prelua date, fiecare dintre ele având avantajele și compromisurile sale.

Când decideți cu privire la metoda de utilizat, luați în considerare compromisurile și asigurați-vă că utilizați o tehnică cu care vă simțiți confortabil.