Pobieranie danych z API w Next.js: Wykorzystanie getStaticProps i getServerSideProps

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ą.