Ag fáil sonraí ó APInna i Next.js: Ag baint úsáide as getStaticProps agus getServerSideProps

Agus Next.js feidhmchlár á fhorbairt, is gné ríthábhachtach é sonraí a fháil ó APInna chun ábhar dinimiciúil a thaispeáint. Tabharfaidh an t-alt seo treoir duit trí úsáid a bhaint as getStaticProps chun sonraí statacha a fháil le linn an phróisis tógála agus trí úsáid a bhaint as getServerSideProps chun sonraí a fháil ó APInna ar gach iarratas.

Ag baint úsáide as getStaticProps

getStaticProps is modh ionsuite é Next.js a thacaíonn le sonraí statacha a fháil le linn an phróisis tógála. Ligeann sé duit leathanaigh statacha a chruthú le sonraí ceistithe, a réamhsholáthar sula n-imscartar an feidhmchlár. Seo sampla bunúsach d’úsáid getStaticProps:

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

Sa sampla thuas, úsáidimid fetch sonraí a fhiosrú ó API agus na sonraí a sheoladh ar ais mar fhearais.

Ag baint úsáide as getServerSideProps

getServerSideProps is modh eile é Next.js a chuireann ar do chumas sonraí a fháil ó APIanna ar gach iarratas. Cinntíonn sé seo go mbíonn an t-ábhar cothrom le dáta agus dinimiciúil i gcónaí. Seo sampla d’úsáid getServerSideProps:

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

getServerSideProps Fiosróidh an modh sonraí ón API gach uair a dhéantar iarratas chuig an leathanach.

Conclúid

Sa chuid seo, tá tú tar éis foghlaim conas sonraí a fháil go héifeachtach ó APInna i d’ Next.js fheidhmchlár. Trí úsáid a bhaint as getStaticProps agus getServerSideProps, is féidir leat ábhar statach agus dinimiciúil araon a thaispeáint go solúbtha i d’fheidhmchlár.