Details zu getStaticProps

Hier sind einige wesentliche Informationen, die Sie über getStaticProps wissen sollten.

Externe API abfragen oder Datenbank abfragen

In lib/posts.js haben wir getSortedPostsData implementiert, das Daten aus dem Dateisystem abruft. Sie können die Daten aber auch aus anderen Quellen abrufen, wie z.B. einem externen API-Endpunkt, und es wird genauso funktionieren:

export async function getSortedPostsData() {
  // Anstelle des Dateisystems,
  // Daten von einem externen API-Endpunkt abrufen
  const res = await fetch('..');
  return res.json();
}

Hinweis: Next.js stellt fetch() sowohl auf dem Client als auch auf dem Server bereit. Sie müssen es nicht importieren.

Sie können auch direkt die Datenbank abfragen:

import someDatabaseSDK from 'someDatabaseSDK'
 
const databaseClient = someDatabaseSDK.createClient(...)
 
export async function getSortedPostsData() {
  // Anstelle des Dateisystems,
  // Daten direkt aus der Datenbank abrufen
  return databaseClient.query('SELECT posts...')
}

Dies ist möglich, weil getStaticProps nur auf der Server-Seite ausgeführt wird. Es wird niemals auf der Client-Seite ausgeführt. Es wird nicht einmal im JS-Bundle für den Browser enthalten sein. Das bedeutet, Sie können Code wie direkte Datenbankabfragen schreiben, ohne dass dieser an Browser gesendet wird.

Entwicklung vs. Produktion

• In der Entwicklung (npm run dev oder yarn dev) wird getStaticProps bei jeder Anfrage ausgeführt.
• In der Produktion wird getStaticProps während der Build-Zeit ausgeführt. Dieses Verhalten kann jedoch durch den fallback-Schlüssel erweitert werden, der von getStaticPaths zurückgegeben wird.

Da es für die Ausführung während der Build-Zeit gedacht ist, können Sie keine Daten verwenden, die nur während der Anfragezeit verfügbar sind, wie z.B. Abfrageparameter oder HTTP-Header.

Nur in einer Seite erlaubt

getStaticProps kann nur von einer Seite exportiert werden. Sie können es nicht aus Nicht-Seiten-Dateien exportieren.

Einer der Gründe für diese Einschränkung ist, dass React alle erforderlichen Daten benötigt, bevor die Seite gerendert wird.

Was, wenn ich Daten zur Anfragezeit abrufen muss?

Da Statische Generierung einmal während der Build-Zeit erfolgt, ist sie nicht für Daten geeignet, die sich häufig aktualisieren oder bei jeder Benutzeranfrage ändern.

In solchen Fällen, in denen sich Ihre Daten wahrscheinlich ändern, können Sie Server-seitiges Rendering (SSR) verwenden. Lassen Sie uns im nächsten Abschnitt mehr über Server-seitiges Rendering lernen.