Jġibu Dejta mill-APIs fi Next.js: L-użu ta' getStaticProps u getServerSideProps

Fil-proċess tal-iżvilupp ta' Next.js applikazzjoni, il-ġbir tad-dejta mill-APIs huwa aspett kruċjali għall-wiri ta' kontenut dinamiku. Dan l-artikolu jiggwidak billi tuża getStaticProps biex iġġib id-dejta statika matul il-proċess tal-bini u tuża getServerSideProps biex iġġib id-dejta mill-APIs fuq kull talba.

Bl-użu getStaticProps

getStaticProps huwa metodu inkorporat Next.js li jappoġġja l-ġbir tad-dejta statika matul il-proċess tal-bini. Jippermettilek toħloq paġni statiċi b'dejta mistoqsija, li hija mogħtija minn qabel qabel ma tiġi skjerata l-applikazzjoni. Hawn eżempju bażiku ta 'użu getStaticProps:

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

Fl-eżempju ta 'hawn fuq, nużaw fetch biex nistaqsu dejta minn API u nirritornaw id-dejta bħala props.

Bl-użu getServerSideProps

getServerSideProps huwa metodu ieħor Next.js li jippermettilek li jġib id-dejta mill-APIs fuq kull talba. Dan jiżgura li l-kontenut ikun dejjem aġġornat u dinamiku. Hawn eżempju ta 'użu getServerSideProps:

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

Il- getServerSideProps metodu se jitlob dejta mill-API kull darba li ssir talba lill-paġna.

Konklużjoni

F'din it-taqsima, tgħallimt kif iġġib id-dejta mill-APIs b'mod effiċjenti fl- Next.js applikazzjoni tiegħek. Billi tuża getStaticProps u getServerSideProps, tista' turi kemm kontenut statiku kif ukoll dinamiku b'mod flessibbli fl-applikazzjoni tiegħek.