Statische Seiten-Generierung (SSG)

Beispiele

Wenn eine Seite Statische Generierung verwendet, wird das HTML der Seite zur Build-Zeit 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 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 der Build-Zeit eine einzelne HTML-Datei pro Seite.

Statische Generierung mit Daten

Einige Seiten erfordern das Abrufen externer Daten für das Vorrendering. Es gibt zwei Szenarien, und eines oder beide könnten zutreffen. In jedem Fall können Sie die folgenden Funktionen verwenden, die Next.js bereitstellt:

Ihr Seiteninhalt hängt von externen Daten ab: Verwenden Sie getStaticProps.
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 Blogseite muss möglicherweise die Liste der Blogbeiträ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 Vorrendering abzurufen, ermöglicht Next.js Ihnen, eine async-Funktion namens getStaticProps aus derselben Datei zu exportieren. Diese Funktion wird zur Build-Zeit aufgerufen und ermöglicht es Ihnen, die abgerufenen Daten an die props der Seite beim Vorrendering zu übergeben.

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

// Diese Funktion wird zur Build-Zeit 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 zur Build-Zeit
  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 das Erstellen von Seiten mit dynamischen Routen. Beispielsweise können Sie eine Datei namens pages/posts/[id].js erstellen, um einen einzelnen Blogbeitrag basierend auf der id anzuzeigen. Dies ermöglicht es Ihnen, einen Blogbeitrag mit id: 1 anzuzeigen, wenn Sie auf posts/1 zugreifen.

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

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

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

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

Also hängen Ihre Seitenpfade, die vorgerendert werden, 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 zur Build-Zeit aufgerufen und ermöglicht es Ihnen, anzugeben, welche Pfade Sie vorrendern möchten.

// Diese Funktion wird zur Build-Zeit 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 zur Build-Zeit vorrendern.
  // { 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, damit Sie die Daten über den Beitrag mit dieser id abrufen und zum Vorrendering der Seite verwenden können:

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

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

// Diese Funktion wird auch zur Build-Zeit 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:

Marketingseiten
Blogbeiträge und Portfolios
E-Commerce-Produktlisten
Hilfe und Dokumentation

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

Andererseits ist Statische Generierung keine gute Idee, wenn Sie eine Seite nicht vor der Anfrage eines Benutzers 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-seitiger Datenabfrage: Sie können das Vorrendering 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 Dokumentation zur Datenabfrage.
Verwenden Sie Server-seitiges Rendering (SSR): Next.js rendert eine Seite bei jeder Anfrage vor. Es wird langsamer sein, weil 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.