Duomenų gavimas iš API Next.js: „getStaticProps“ ir „getServerSideProps“ naudojimas

Kuriant Next.js programą duomenų gavimas iš API yra esminis dinamiško turinio rodymo aspektas. Šiame straipsnyje bus paaiškinta, kaip naudoti getStaticProps statiniams duomenims gauti kūrimo proceso metu ir kaip gauti getServerSideProps duomenis iš API pagal kiekvieną užklausą.

Naudojant getStaticProps

getStaticProps yra integruotas metodas, Next.js kuris palaiko statinių duomenų gavimą kūrimo proceso metu. Tai leidžia kurti statinius puslapius su užklausais pateiktais duomenimis, kurie iš anksto pateikiami prieš diegiant programą. Štai pagrindinis naudojimo pavyzdys getStaticProps:

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

Aukščiau pateiktame pavyzdyje mes naudojame fetch duomenų užklausai iš API ir duomenims grąžinti kaip rekvizitus.

Naudojant getServerSideProps

getServerSideProps yra dar vienas metodas Next.js, leidžiantis gauti duomenis iš API pagal kiekvieną užklausą. Tai užtikrina, kad turinys visada būtų naujausias ir dinamiškas. Štai naudojimo pavyzdys getServerSideProps:

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

Metodas getServerSideProps užklausos duomenų iš API kiekvieną kartą, kai bus pateikta užklausa puslapiui.

Išvada

Šiame skyriuje sužinojote, kaip efektyviai gauti duomenis iš Next.js programos API. Naudodami getStaticProps ir getServerSideProps, savo programoje galite lanksčiai rodyti statinį ir dinaminį turinį.