Preluarea datelor de la API-uri în Next.js: Utilizarea getStaticProps și getServerSideProps

În procesul de dezvoltare a unei Next.js aplicații, preluarea datelor de la API-uri este un aspect crucial pentru afișarea conținutului dinamic. Acest articol vă va ghida prin utilizarea getStaticProps pentru preluarea datelor statice în timpul procesului de construire și utilizarea getServerSideProps pentru preluarea datelor de la API-uri la fiecare solicitare.

Folosind getStaticProps

getStaticProps este o metodă încorporată Next.js care acceptă preluarea datelor statice în timpul procesului de construire. Vă permite să creați pagini statice cu date interogate, care sunt pre-rendate înainte ca aplicația să fie implementată. Iată un exemplu de bază de utilizare getStaticProps:

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

În exemplul de mai sus, folosim fetch pentru a interoga datele dintr-un API și returnăm datele ca elemente de recuzită.

Folosind getServerSideProps

getServerSideProps este o altă metodă prin Next.js care vă permite să preluați date de la API-uri la fiecare solicitare. Acest lucru asigură că conținutul este întotdeauna actualizat și dinamic. Iată un exemplu de utilizare getServerSideProps:

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

Metoda getServerSideProps va interoga datele din API de fiecare dată când se face o solicitare către pagină.

Concluzie

În această secțiune, ați învățat cum să preluați eficient date de la API-urile din Next.js aplicația dvs. Folosind getStaticProps și getServerSideProps, puteți afișa atât conținut static, cât și dinamic în mod flexibil în aplicația dvs.