Statische Seiten-Generierung (Static Site Generation, SSG)

Wenn eine Seite Statische Generierung verwendet, wird das HTML der Seite zum Build-Zeitpunkt generiert. Das bedeutet in der Produktion, dass das HTML der Seite erstellt wird, wenn Sie next build ausführen. Dieses HTML wird dann bei jeder Anfrage wiederverwendet. Es kann von einem CDN zwischengespeichert werden.

In Next.js können Sie Seiten mit oder ohne Daten statisch generieren. Schauen wir uns jeden Fall an.

Statische Generierung ohne Daten

Standardmäßig rendert Next.js Seiten mit statischer Generierung ohne das Abrufen von Daten vor. Hier ein Beispiel:

function About() {
  return <div>About</div>
}

export default About

Beachten Sie, dass diese Seite keine externen Daten abrufen muss, um vorgerendert zu werden. In solchen Fällen generiert Next.js während des Build-Vorgangs eine einzelne HTML-Datei pro Seite.

Statische Generierung mit Daten

Einige Seiten erfordern das Abrufen externer Daten für das Vorab-Rendering. Es gibt zwei Szenarien, und eines oder beide könnten zutreffen. In jedem Fall können Sie diese von Next.js bereitgestellten Funktionen verwenden:

1. Ihr Seiteninhalt hängt von externen Daten ab: Verwenden Sie getStaticProps.
2. Ihre Seitenpfade hängen von externen Daten ab: Verwenden Sie getStaticPaths (normalerweise zusätzlich zu getStaticProps).

Szenario 1: Ihr Seiteninhalt hängt von externen Daten ab

Beispiel: Ihre Blog-Seite muss möglicherweise die Liste der Blog-Beiträge von einem CMS (Content-Management-System) abrufen.

// TODO: Muss `posts` abrufen (durch Aufruf einer API-Endpunkts)
//       bevor diese Seite vorgerendert werden kann.
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

Um diese Daten beim Vorab-Rendering abzurufen, erlaubt Next.js Ihnen, eine async-Funktion namens getStaticProps aus derselben Datei zu exportieren. Diese Funktion wird zum Build-Zeitpunkt aufgerufen und ermöglicht es Ihnen, die abgerufenen Daten an die props der Seite beim Vorab-Rendering zu übergeben.

export default function Blog({ posts }) {
  // Beiträge rendern...
}

// Diese Funktion wird zum Build-Zeitpunkt aufgerufen
export async function getStaticProps() {
  // Einen externen API-Endpunkt aufrufen, um Beiträge zu erhalten
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Durch die Rückgabe von { props: { posts } } erhält die Blog-Komponente
  // `posts` als Prop zum Build-Zeitpunkt
  return {
    props: {
      posts,
    },
  }
}

Um mehr darüber zu erfahren, wie getStaticProps funktioniert, lesen Sie die Dokumentation zur Datenabfrage.

Szenario 2: Ihre Seitenpfade hängen von externen Daten ab

Next.js ermöglicht Ihnen die Erstellung von Seiten mit dynamischen Routen. Zum Beispiel können Sie eine Datei namens pages/posts/[id].js erstellen, um einen einzelnen Blog-Beitrag basierend auf der id anzuzeigen. Dies ermöglicht es Ihnen, einen Blog-Beitrag mit id: 1 anzuzeigen, wenn Sie auf posts/1 zugreifen.

Um mehr über dynamisches Routing zu erfahren, lesen Sie die Dokumentation zum dynamischen Routing.

Allerdings könnte die id, die Sie zum Build-Zeitpunkt vorab rendern möchten, von externen Daten abhängen.

Beispiel: Angenommen, Sie haben nur einen Blog-Beitrag (mit id: 1) der Datenbank hinzugefügt. In diesem Fall möchten Sie nur posts/1 zum Build-Zeitpunkt vorab rendern.

Später könnten Sie einen zweiten Beitrag mit id: 2 hinzufügen. Dann möchten Sie auch posts/2 vorab rendern.

Ihre Seitenpfade, die vorab gerendert werden, hängen also von externen Daten ab. Um dies zu handhaben, erlaubt Next.js Ihnen, eine async-Funktion namens getStaticPaths aus einer dynamischen Seite (pages/posts/[id].js in diesem Fall) zu exportieren. Diese Funktion wird zum Build-Zeitpunkt aufgerufen und ermöglicht es Ihnen, anzugeben, welche Pfade Sie vorab rendern möchten.

// Diese Funktion wird zum Build-Zeitpunkt aufgerufen
export async function getStaticPaths() {
  // Einen externen API-Endpunkt aufrufen, um Beiträge zu erhalten
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Die Pfade erhalten, die wir basierend auf den Beiträgen vorab rendern möchten
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // Wir werden nur diese Pfade zum Build-Zeitpunkt vorab rendern.
  // { fallback: false } bedeutet, dass andere Routen einen 404-Fehler zurückgeben sollten.
  return { paths, fallback: false }
}

Außerdem müssen Sie in pages/posts/[id].js getStaticProps exportieren, um die Daten über den Beitrag mit dieser id abzurufen und sie zum Vorab-Rendering der Seite zu verwenden:

export default function Post({ post }) {
  // Beitrag rendern...
}

export async function getStaticPaths() {
  // ...
}

// Diese Funktion wird ebenfalls zum Build-Zeitpunkt aufgerufen
export async function getStaticProps({ params }) {
  // params enthält die Beitrags-`id`.
  // Wenn die Route wie /posts/1 ist, dann ist params.id 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Beitragsdaten über Props an die Seite übergeben
  return { props: { post } }
}

Um mehr darüber zu erfahren, wie getStaticPaths funktioniert, lesen Sie die Dokumentation zur Datenabfrage.

Wann sollte ich statische Generierung verwenden?

Wir empfehlen, statische Generierung (mit und ohne Daten) wann immer möglich zu verwenden, da Ihre Seite einmal gebaut und von einem CDN bereitgestellt werden kann, was sie viel schneller macht, als wenn ein Server die Seite bei jeder Anfrage rendert.

Sie können statische Generierung für viele Arten von Seiten verwenden, einschließlich:

• Marketing-Seiten
• Blog-Beiträge und Portfolios
• E-Commerce-Produktlisten
• Hilfe und Dokumentation

Sie sollten sich fragen: "Kann ich diese Seite vor der Anfrage eines Benutzers vorab rendern?" Wenn die Antwort ja ist, sollten Sie statische Generierung wählen.

Andererseits ist statische Generierung keine gute Idee, wenn Sie eine Seite nicht vor der Anfrage eines Benutzers vorab rendern können. Vielleicht zeigt Ihre Seite häufig aktualisierte Daten, und der Seiteninhalt ändert sich bei jeder Anfrage.

In solchen Fällen können Sie eines der folgenden Dinge tun:

• Verwenden Sie statische Generierung mit Client-seitiger Datenabfrage: Sie können Teile einer Seite beim Vorab-Rendering überspringen und dann client-seitiges JavaScript verwenden, um sie zu füllen. Um mehr über diesen Ansatz zu erfahren, lesen Sie die Dokumentation zur Datenabfrage.
• Verwenden Sie Server-Side Rendering: Next.js rendert eine Seite bei jeder Anfrage vorab. Es wird langsamer sein, weil die Seite nicht von einem CDN zwischengespeichert werden kann, aber die vorab gerenderte Seite wird immer auf dem neuesten Stand sein. Wir werden diesen Ansatz weiter unten besprechen.