Az alkalmazások fejlesztése során Next.js az API-kból való adatok lekérése kulcsfontosságú szempont a dinamikus tartalom megjelenítéséhez. Ez a cikk végigvezeti Önt getStaticProps a statikus adatok lekéréséhez az összeállítási folyamat során, valamint getServerSideProps az API-kból történő adatok lekéréséhez minden kérés esetén.
A getStaticProps használata
getStaticProps egy beépített módszer, Next.js amely támogatja a statikus adatok lekérését az építési folyamat során. Lehetővé teszi statikus oldalak létrehozását lekérdezett adatokkal, amelyeket az alkalmazás üzembe helyezése előtt előrenderel. Íme egy alapvető példa a használatára getStaticProps:
export async function getStaticProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
A fenti példában fetch az adatokat egy API-ból lekérdezzük, és az adatokat kellékként adjuk vissza.
A getServerSideProps használata
getServerSideProps egy másik módszer, Next.js amely lehetővé teszi adatok lekérését az API-kból minden kérés esetén. Ez biztosítja, hogy a tartalom mindig naprakész és dinamikus legyen. Íme egy példa a használatára getServerSideProps:
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
A getServerSideProps metódus minden alkalommal lekérdezi az adatokat az API-tól, amikor kérés érkezik az oldalra.
Következtetés
Ebben a szakaszban megtanulta, hogyan lehet hatékonyan lekérni az adatokat az API-kból az alkalmazásban Next.js. getStaticProps A és használatával getServerSideProps rugalmasan jeleníthet meg statikus és dinamikus tartalmat is az alkalmazásban.