Načítání dat z rozhraní API v Next.js: Využití getStaticProps a getServerSideProps

V procesu vývoje Next.js aplikace je načítání dat z API zásadním aspektem pro zobrazování dynamického obsahu. Tento článek vás provede používáním getStaticProps k načítání statických dat během procesu sestavení a používáním getServerSideProps k načítání dat z rozhraní API při každém požadavku.

Pomocí getStaticProps

getStaticProps je vestavěná metoda, Next.js která podporuje načítání statických dat během procesu sestavení. Umožňuje vytvářet statické stránky s dotazovanými daty, která se před nasazením aplikace předrenderují. Zde je základní příklad použití getStaticProps:

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

Ve výše uvedeném příkladu používáme fetch k dotazování dat z API a vracíme data jako rekvizity.

Pomocí getServerSideProps

getServerSideProps je další metoda Next.js, která vám umožňuje načíst data z rozhraní API při každém požadavku. To zajišťuje, že obsah je vždy aktuální a dynamický. Zde je příklad použití getServerSideProps:

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

Metoda getServerSideProps se bude dotazovat na data z API pokaždé, když je na stránku odeslán požadavek.

Závěr

V této části jste se naučili, jak efektivně načítat data z rozhraní API ve vaší Next.js aplikaci. Pomocí getStaticProps a getServerSideProps můžete ve své aplikaci flexibilně zobrazovat statický i dynamický obsah.