Dohvaćanje podataka iz API-ja u Next.js: Korištenje getStaticProps i getServerSideProps

U procesu razvoja Next.js aplikacije, dohvaćanje podataka iz API-ja ključni je aspekt za prikaz dinamičkog sadržaja. Ovaj će vas članak voditi kroz korištenje getStaticProps za dohvaćanje statičkih podataka tijekom procesa izrade i korištenje getServerSideProps za dohvaćanje podataka iz API-ja na svakom zahtjevu.

Korištenje getStaticProps

getStaticProps je ugrađena metoda Next.js koja podržava dohvaćanje statičkih podataka tijekom procesa izgradnje. Omogućuje vam stvaranje statičnih stranica s traženim podacima, koji se unaprijed renderiraju prije nego što se aplikacija implementira. Evo osnovnog primjera korištenja getStaticProps:

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

U gornjem primjeru koristimo se fetch za upit podataka iz API-ja i vraćamo podatke kao rekvizite.

Korištenje getServerSideProps

getServerSideProps je još jedna metoda Next.js koja vam omogućuje dohvaćanje podataka iz API-ja na svaki zahtjev. To osigurava da je sadržaj uvijek ažuran i dinamičan. Evo primjera korištenja getServerSideProps:

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

Metoda getServerSideProps će tražiti podatke iz API-ja svaki put kada se uputi zahtjev stranici.

Zaključak

U ovom ste odjeljku naučili kako učinkovito dohvatiti podatke iz API-ja u svojoj Next.js aplikaciji. Korištenjem getStaticProps i getServerSideProps možete fleksibilno prikazati i statični i dinamički sadržaj u svojoj aplikaciji.