W procesie tworzenia Next.js aplikacji pobieranie danych z interfejsów API jest kluczowym aspektem wyświetlania treści dynamicznych. Ten artykuł przeprowadzi Cię przez proces pobierania getStaticProps danych statycznych podczas procesu kompilacji oraz pobierania getServerSideProps danych z interfejsów API przy każdym żądaniu.
Używając getStaticProps
getStaticProps to wbudowana metoda, Next.js która obsługuje pobieranie danych statycznych podczas procesu kompilacji. Pozwala na tworzenie statycznych stron z danymi, których dotyczy zapytanie, które są wstępnie renderowane przed wdrożeniem aplikacji. Oto podstawowy przykład użycia getStaticProps:
export async function getStaticProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
W powyższym przykładzie używamy fetch do wysyłania zapytań o dane z interfejsu API i zwracania danych jako rekwizytów.
Używając getServerSideProps
getServerSideProps to kolejna metoda, Next.js która umożliwia pobieranie danych z interfejsów API przy każdym żądaniu. Dzięki temu treść jest zawsze aktualna i dynamiczna. Oto przykład użycia getServerSideProps:
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
Metoda getServerSideProps będzie wyszukiwać dane z interfejsu API za każdym razem, gdy zostanie wysłane żądanie do strony.
Wniosek
W tej sekcji nauczyłeś się, jak efektywnie pobierać dane z interfejsów API w swojej Next.js aplikacji. Używając getStaticProps i getServerSideProps, możesz elastycznie wyświetlać w aplikacji zarówno zawartość statyczną, jak i dynamiczną.