Next.js è un framework robusto che consente agli sviluppatori di creare rapidamente applicazioni React renderizzate lato server. Ha varie caratteristiche essenziali. Una delle sue caratteristiche principali è la sua capacità di recuperare facilmente i dati e renderli prontamente disponibili per i componenti.

Il recupero dei dati è una funzionalità essenziale che consente agli sviluppatori di recuperare e visualizzare i dati su un sito web/applicazione web. Esistono diversi modi per recuperare i dati in Next.js, ognuno con i suoi vantaggi e casi d'uso. Questo articolo esplorerà diversi modi per recuperare i dati in Next.js.

Utilizzo dell'hook useEffect per recuperare i dati

IL useEffect il gancio è un Gancio di reazione utilizzato per eseguire effetti collaterali, come le chiamate API nei componenti. Puoi utilizzare l'hook useEffect per recuperare i dati in Next.js.

Questo hook è utile per le pagine che necessitano di dati dinamici, come le pagine del profilo utente che mostrano informazioni specifiche per l'utente che ha effettuato l'accesso.

Per utilizzare l'hook useEffect, devi prima importarlo nel tuo componente preferito, recuperare i dati ed eseguire il rendering della tua pagina utilizzandolo.

Per esempio:

importare {usaEffetto, usaStato} da'reagire';
esportarepredefinitofunzioneCasa() {
cost [data, setData] = useState("");
 usaEffetto(() => {
 andare a prendere(' https://api.example.com/data');
 .Poi( (risposta) => risposta.json() )
 .Poi( (dati) => setData (dati) )
 }, []); 
ritorno (


 {dati.nome}
 </div>
 )
}

Questo blocco di codice utilizza l'hook useEffect per recuperare i dati da un'API. If passa due parametri all'hook useEffect: una funzione per recuperare i dati e un array di dipendenze. In caso di successo, utilizza setData() per aggiornare lo stato del componente con i dati restituiti dalla richiesta di recupero.

L'array di dipendenza passato all'hook useEffect dovrebbe contenere il valore da cui dipende l'effetto. Il componente eseguirà nuovamente l'effetto solo quando il valore nell'array di dipendenza cambia. Se l'array di dipendenza è vuoto, come in questo esempio, l'effetto verrà eseguito solo al primo rendering.

Gestione della riconvalida automatica tramite SWR

IL ROS (stale-while-revalidate) è una libreria hook di React per la gestione del recupero dei dati. Devi impostare la libreria SWR prima, per usarlo nella tua applicazione Next.

Una delle caratteristiche principali della libreria SWR è la sua capacità di automatizzare la riconvalida dei dati. Questa funzione è essenziale quando i dati vengono aggiornati frequentemente ed è necessario che siano costantemente aggiornati. Questa funzionalità garantisce che la tua applicazione abbia sempre accesso ai dati più aggiornati, rendendola più dinamica e reattiva per i tuoi utenti.

La libreria SWR effettua una nuova richiesta di recupero a un'API quando un utente si concentra di nuovo su una pagina o passa da una scheda all'altra. Quando un utente lascia una pagina, i dati visualizzati sullo schermo diventano obsoleti. Quando tornano alla pagina, la libreria SWR invia una nuova richiesta di recupero all'API e confronta i nuovi dati con i dati obsoleti per determinare se sono cambiati.

Per impedire alla libreria SWR di eseguire questa azione, puoi utilizzare il file riconvalidareOnFocus opzione.

Così:

cost { dati, errore, isLoading } = useSWR(' https://api.example.com/data', raccoglitore, {
 rivalidareOnFocus: falso,
})

L'impostazione della proprietà revalidateOnFocus su false assicurerà che la libreria SWR non riconvalidi i tuoi dati ogni volta che ti concentri nuovamente sulla pagina.

La libreria SWR inoltre riconvalida i dati ogni volta che un utente si riconnette a Internet. Questa azione può essere molto utile in determinate situazioni e funziona automaticamente.

Per disabilitare l'azione, puoi usare il file revalidateOnReconnect opzione:

cost { dati, errore, isLoading } = useSWR(' https://api.example.com/data', raccoglitore, {
 riconvalida su riconnessione: falso,
})

Per disabilitare la riconvalida automatica dei dati, imposta entrambe le proprietà revalidateOnFocus e revalidateOnRecconect su false.

Utilizzo della libreria Isomorphic-Unfetch per eseguire richieste di recupero

IL isomorfo-unfetch library è una libreria piccola e leggera che può eseguire richieste di recupero in un'applicazione Next.js. La libreria è un'ottima alternativa al nativo andare a prendere API. È semplice da usare, il che lo rende perfetto per gli sviluppatori che non conoscono le richieste di recupero.

Puoi utilizzare isomorphic-unfetch come polyfill per i browser meno recenti che non supportano l'API di recupero nativa. La libreria isomorphic-unfetch è minimalista e adatta per lavorare su piccole applicazioni.

Per utilizzare isomorphic-unfetch in un'applicazione Next.js, installa la libreria eseguendo il seguente comando:

npm install isomorphic-unfetch

Puoi quindi importare la libreria e utilizzarla nel tuo componente per recuperare i dati, in questo modo:

importare Andare a prendere da'isomorfo-unfetch'
importare {useState, useEffect} da'reagire'
esportarepredefinitofunzioneCasa() {
cost [data, setData] = useState(nullo)
 usaEffetto(() => {
 Andare a prendere(' https://api.example.com/data')
 .Poi( (risposta) => risposta.json)
 .Poi( (dati) => setData (dati) )
 }, [])

Se (!dati) ritorno<div>Caricamento...div>
ritorno (


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

La funzione isomorphic-unfetch funziona sia sul lato client che sul lato server.

Recupero efficiente dei dati con Next.js

Il recupero dei dati è una caratteristica importante durante lo sviluppo di applicazioni. Next.js offre diversi modi per recuperare i dati, ognuno dei quali ha i suoi vantaggi e compromessi.

Quando decidi il metodo da utilizzare, considera i compromessi e assicurati di utilizzare una tecnica con cui ti senti a tuo agio.