Statische Generierung mit und ohne Daten

Statische Generierung (Static Generation) kann mit oder ohne Daten erfolgen.

Bisher erforderten alle von uns erstellten Seiten keine Abfrage externer Daten. Diese Seiten werden automatisch statisch generiert, wenn die App für die Produktion gebaut wird.

Für einige Seiten kann es jedoch sein, dass Sie das HTML nicht rendern können, ohne zuvor externe Daten abzurufen. Vielleicht müssen Sie auf das Dateisystem zugreifen, eine externe API abfragen oder Ihre Datenbank zur Build-Zeit abfragen. Next.js unterstützt diesen Fall — Statische Generierung mit Daten (Static Generation with Data) — direkt.

Statische Generierung mit Daten mittels getStaticProps

Wie funktioniert das? Nun, in Next.js können Sie, wenn Sie eine Seitenkomponente exportieren, auch eine async-Funktion namens getStaticProps exportieren. Wenn Sie dies tun, dann:

• Wird getStaticProps zur Build-Zeit in der Produktion ausgeführt, und…
• Innerhalb der Funktion können Sie externe Daten abrufen und als Props an die Seite senden.

export default function Home(props) { ... }
 
export async function getStaticProps() {
  // Externe Daten aus dem Dateisystem, API, DB etc. abrufen
  const data = ...
 
  // Der Wert des `props`-Schlüssels wird
  // an die `Home`-Komponente übergeben
  return {
    props: ...
  }
}

Im Wesentlichen ermöglicht getStaticProps Ihnen, Next.js mitzuteilen: "Hey, diese Seite hat einige Datenabhängigkeiten — also stelle sicher, dass diese zuerst aufgelöst werden, wenn du diese Seite zur Build-Zeit vor-renderst!"

Hinweis: Im Entwicklungsmodus wird getStaticProps bei jeder Anfrage ausgeführt.

getStaticProps verwenden

Am besten lernt man durch Praxis, daher werden wir ab der nächsten Seite getStaticProps verwenden, um unseren Blog zu implementieren.