Pridobivanje podatkov iz API-jev v Next.js: uporaba getStaticProps in getServerSideProps

V procesu razvoja Next.js aplikacije je pridobivanje podatkov iz API-jev ključni vidik za prikaz dinamične vsebine. Ta članek vas bo vodil skozi uporabo getStaticProps za pridobivanje statičnih podatkov med gradnjo in uporabo getServerSideProps za pridobivanje podatkov iz API-jev za vsako zahtevo.

Uporaba getStaticProps

getStaticProps je vgrajena metoda, Next.js ki podpira pridobivanje statičnih podatkov med gradnjo. Omogoča vam ustvarjanje statičnih strani z zahtevanimi podatki, ki so vnaprej upodobljeni, preden se aplikacija uvede. Tukaj je osnovni primer uporabe getStaticProps:

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

V zgornjem primeru uporabljamo fetch za poizvedovanje podatkov iz API-ja in vrnitev podatkov kot rekvizitov.

Uporaba getServerSideProps

getServerSideProps je še ena metoda, Next.js ki vam omogoča pridobivanje podatkov iz API-jev za vsako zahtevo. To zagotavlja, da je vsebina vedno aktualna in dinamična. Tukaj je primer uporabe getServerSideProps:

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

Metoda getServerSideProps bo poizvedovala po podatkih iz API-ja vsakič, ko bo stran vložena zahteva.

Zaključek

V tem razdelku ste se naučili, kako učinkovito pridobiti podatke iz API-jev v vaši Next.js aplikaciji. Z uporabo getStaticProps in getServerSideProps lahko v svoji aplikaciji prilagodljivo prikažete statično in dinamično vsebino.