Statische Seiten-Generierung (SSG)

Wenn eine Seite Statische Generierung verwendet, wird das HTML der Seite zum Build-Zeitpunkt generiert. Das bedeutet in der Produktion, dass das Seiten-HTML generiert 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 vor, ohne Daten abzurufen. 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 Vorrendern. 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 eines 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 Vorrendern abzurufen, ermöglicht Next.js Ihnen, eine async-Funktion namens getStaticProps aus derselben Datei zu exportieren. Diese Funktion wird beim Build-Vorgang aufgerufen und ermöglicht es Ihnen, die abgerufenen Daten an die props der Seite beim Vorrendern zu übergeben.

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

// Diese Funktion wird beim Build-Vorgang 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 beim Build-Vorgang
  return {
    props: {
      posts,
    },
  }
}

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

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

Next.js ermöglicht es Ihnen, Seiten mit dynamischen Routen zu erstellen. Beispielsweise 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 Dynamisches Routing-Dokumentation.

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

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

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

Also hängen Ihre vorgerenderten Seitenpfade von externen Daten ab. Um dies zu handhaben, ermöglicht Next.js Ihnen, eine async-Funktion namens getStaticPaths aus einer dynamischen Seite (pages/posts/[id].js in diesem Fall) zu exportieren. Diese Funktion wird beim Build-Vorgang aufgerufen und ermöglicht es Ihnen, anzugeben, welche Pfade Sie vorrendern möchten.

// Diese Funktion wird beim Build-Vorgang 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 vorrendern möchten
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // Wir werden nur diese Pfade zum Build-Zeitpunkt vorrendern.
  // { fallback: false } bedeutet, dass andere Routen 404 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 damit die Seite vorzurrendern:

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

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

// Diese Funktion wird ebenfalls beim Build-Vorgang 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 Datenabruf-Dokumentation.

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 einer Benutzeranfrage vorrendern?" Wenn die Antwort ja ist, sollten Sie statische Generierung wählen.

Andererseits ist statische Generierung keine gute Idee, wenn Sie eine Seite nicht vor einer Benutzeranfrage vorrendern 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-seitigem Datenabruf: Sie können das Vorrendern einiger Teile einer Seite überspringen und dann client-seitiges JavaScript verwenden, um sie zu füllen. Um mehr über diesen Ansatz zu erfahren, lesen Sie die Datenabruf-Dokumentation.
• Verwenden Sie Server-seitiges Rendering (SSR): Next.js rendert eine Seite bei jeder Anfrage vor. Es wird langsamer sein, da die Seite nicht von einem CDN zwischengespeichert werden kann, aber die vorgerenderte Seite wird immer auf dem neuesten Stand sein. Wir werden diesen Ansatz weiter unten besprechen.