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.