Recupero dei dati dalle API in Next.js: utilizzo di getStaticProps e getServerSideProps

Nel processo di sviluppo di un'applicazione Next.js, il recupero dei dati dalle API è un aspetto cruciale per la visualizzazione di contenuti dinamici. Questo articolo ti guiderà attraverso l'utilizzo getStaticProps per recuperare i dati statici durante il processo di compilazione e l'utilizzo getServerSideProps per recuperare i dati dalle API su ogni richiesta.

Utilizzando getStaticProps

getStaticProps è un metodo integrato Next.js che supporta il recupero di dati statici durante il processo di compilazione. Consente di creare pagine statiche con dati interrogati, di cui viene eseguito il pre-rendering prima della distribuzione dell'applicazione. Ecco un esempio base di utilizzo getStaticProps:

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

Nell'esempio precedente, utilizziamo fetch per interrogare i dati da un'API e restituire i dati come oggetti di scena.

Utilizzando getServerSideProps

getServerSideProps è un altro metodo Next.js che ti consente di recuperare dati dalle API su ogni richiesta. Ciò garantisce che i contenuti siano sempre aggiornati e dinamici. Ecco un esempio di utilizzo getServerSideProps:

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

Il getServerSideProps metodo interrogherà i dati dall'API ogni volta che viene effettuata una richiesta alla pagina.

Conclusione

In questa sezione hai imparato come recuperare in modo efficiente i dati dalle API nella tua Next.js applicazione. Utilizzando getStaticProps e getServerSideProps è possibile visualizzare in modo flessibile sia il contenuto statico che quello dinamico nell'applicazione.