Marrja e të dhënave nga API-të në Next.js: Përdorimi i getStaticProps dhe getServerSideProps

Në procesin e zhvillimit të një Next.js aplikacioni, marrja e të dhënave nga API-të është një aspekt thelbësor për shfaqjen e përmbajtjes dinamike. Ky artikull do t'ju udhëheqë duke përdorur getStaticProps për të marrë të dhëna statike gjatë procesit të ndërtimit dhe duke përdorur getServerSideProps për të marrë të dhëna nga API-të për secilën kërkesë.

Duke përdorur getStaticProps

getStaticProps është një metodë e integruar Next.js që mbështet marrjen e të dhënave statike gjatë procesit të ndërtimit. Kjo ju lejon të krijoni faqe statike me të dhëna të kërkuara, të cilat jepen paraprakisht përpara se aplikacioni të vendoset. Këtu është një shembull bazë i përdorimit getStaticProps:

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

Në shembullin e mësipërm, ne përdorim fetch për të kërkuar të dhëna nga një API dhe për t'i kthyer të dhënat si mbështetëse.

Duke përdorur getServerSideProps

getServerSideProps është një metodë tjetër Next.js që ju mundëson të merrni të dhëna nga API për çdo kërkesë. Kjo siguron që përmbajtja të jetë gjithmonë e përditësuar dhe dinamike. Këtu është një shembull i përdorimit getServerSideProps:

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

Metoda getServerSideProps do të kërkojë të dhëna nga API sa herë që bëhet një kërkesë në faqe.

konkluzioni

Në këtë seksion, ju keni mësuar se si të merrni në mënyrë efikase të dhëna nga API në Next.js aplikacionin tuaj. Duke përdorur getStaticProps dhe getServerSideProps, ju mund të shfaqni në mënyrë fleksibël përmbajtjen statike dhe dinamike në aplikacionin tuaj.