Abrufen von Daten von APIs in Next.js: Verwendung von getStaticProps und getServerSideProps

Bei der Entwicklung einer Next.js Anwendung ist das Abrufen von Daten von APIs ein entscheidender Aspekt für die Anzeige dynamischer Inhalte. Dieser Artikel führt Sie durch die Verwendung getStaticProps zum Abrufen statischer Daten während des Build-Prozesses und durch die Verwendung getServerSideProps zum Abrufen von Daten von APIs bei jeder Anfrage.

Verwendung von getStaticProps

getStaticProps ist eine integrierte Methode, Next.js die das Abrufen statischer Daten während des Erstellungsprozesses unterstützt. Sie können damit statische Seiten mit abgefragten Daten erstellen, die vor der Bereitstellung der Anwendung vorgerendert werden. Hier ist ein einfaches Beispiel für die Verwendung getStaticProps:

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

Im obigen Beispiel verwenden wir, fetch um Daten von einer API abzufragen und die Daten als Requisiten zurückzugeben.

Verwendung von getServerSideProps

getServerSideProps ist eine weitere Methode, mit Next.js der Sie bei jeder Anfrage Daten von APIs abrufen können. Dadurch wird sichergestellt, dass die Inhalte immer aktuell und dynamisch sind. Hier ist ein Beispiel für die Verwendung getServerSideProps:

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

Die getServerSideProps Methode fragt jedes Mal Daten von der API ab, wenn eine Anfrage an die Seite gestellt wird.

Abschluss

In diesem Abschnitt haben Sie erfahren, wie Sie Daten effizient von APIs in Ihrer Next.js Anwendung abrufen. Durch die Verwendung getStaticProps von und getServerSideProps können Sie sowohl statische als auch dynamische Inhalte flexibel in Ihrer Anwendung anzeigen.