Statische Seitengenerierung (SSG)

Wenn eine Seite Statische Generierung verwendet, wird die Seiten-HTML zum Buildzeit generiert. Das bedeutet, in der Produktion wird die Seiten-HTML generiert, wenn Sie next build ausführen. Diese HTML wird dann bei jeder Anfrage wiederverwendet. Sie kann von einem CDN zwischengespeichert werden.

In Next.js können Sie Seiten statisch generieren mit oder ohne Daten. Werfen wir einen Blick auf jeden Fall.

Statische Generierung ohne Daten

Standardmäßig rendert Next.js Seiten mithilfe von Statischer Generierung ohne Daten zu laden. Hier ein Beispiel:

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

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

Statische Generierung mit Daten

Einige Seiten erfordern das Laden externer Daten zum Vorrendern. Es gibt zwei Szenarien, und eines oder beide können zutreffen. In jedem Fall können Sie diese Funktionen verwenden, die Next.js bereitstellt:

1. Der Inhalt Ihrer Seite hängt von externen Daten ab: Verwenden Sie getStaticProps.
2. Die Pfade Ihrer Seite hängen von externen Daten ab: Verwenden Sie getStaticPaths (üblicherweise zusätzlich zu getStaticProps).

Szenario 1: Der Inhalt Ihrer Seite hängt von externen Daten ab

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

// TODO: Muss `posts` (durch Aufruf eines API-Endpunkts) abrufen
//       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 zu laden, erlaubt Next.js Ihnen, eine async-Funktion namens getStaticProps aus derselben Datei zu exportieren. Diese Funktion wird zur Buildzeit aufgerufen und ermöglicht es Ihnen, geladene Daten an die props der Seite beim Vorrendern zu übergeben.

export default function Blog({ posts }) {
  // Beiträge rendern...
}
 
// Diese Funktion wird zur Buildzeit aufgerufen
export async function getStaticProps() {
  // Einen externen API-Endpunkt aufrufen, um Beiträge zu laden
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // Durch Zurückgeben von { props: { posts } } erhält die Blog-Komponente
  // `posts` als Prop zur Buildzeit
  return {
    props: {
      posts,
    },
  }
}

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

Szenario 2: Die Pfade Ihrer Seite hängen von externen Daten ab

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

Weitere Informationen zur dynamischen Routing finden Sie in der Dokumentation zu dynamischen Routen.

Allerdings könnte die id, die Sie zur Buildzeit 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 zur Buildzeit vorrendern.

Später fügen Sie möglicherweise den zweiten Beitrag mit id: 2 hinzu. Dann möchten Sie auch posts/2 vorrendern.

Die Pfade Ihrer Seite, die vorgerendert 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 zur Buildzeit aufgerufen und ermöglicht es Ihnen, anzugeben, welche Pfade Sie vorrendern möchten.

// Diese Funktion wird zur Buildzeit aufgerufen
export async function getStaticPaths() {
  // Einen externen API-Endpunkt aufrufen, um Beiträge zu laden
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // Die Pfade abrufen, die wir basierend auf Beiträgen vorrendern möchten
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
 
  // Wir werden nur diese Pfade zur Buildzeit vorrendern.
  // { fallback: false } bedeutet, andere Routen sollten 404 sein.
  return { paths, fallback: false }
}

Auch in pages/posts/[id].js müssen Sie getStaticProps exportieren, damit Sie Daten über den Beitrag mit dieser id laden und zum Vorrendern der Seite verwenden können:

export default function Post({ post }) {
  // Beitrag rendern...
}
 
export async function getStaticPaths() {
  // ...
}
 
// Dies wird auch zur Buildzeit aufgerufen
export async function getStaticProps({ params }) {
  // params enthält die Beitrags-`id`.
  // Wenn die Route wie /posts/1 aussieht, dann ist params.id gleich 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
 
  // Beitragsdaten über props übergeben
  return { props: { post } }
}

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

Wann sollte ich Statische Generierung verwenden?

Wir empfehlen die Verwendung von Statischer Generierung (mit und ohne Daten), wann immer möglich, da Ihre Seite einmal erstellt und von einem CDN bereitgestellt werden kann, was es 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
• Blog-Beiträge und Portfolios
• E-Commerce-Produktauflistungen
• Hilfe und Dokumentation

Du solltest dir folgende Frage stellen: „Kann ich diese Seite im Voraus vor der Anfrage eines Benutzers rendern?" Wenn die Antwort ja ist, solltest du Static Generation wählen.

Andererseits ist Static Generation keine gute Idee, wenn du eine Seite nicht im Voraus vor der Anfrage eines Benutzers rendern kannst. Möglicherweise zeigt deine Seite häufig aktualisierte Daten und der Seiteninhalt ändert sich bei jeder Anfrage.

In solchen Fällen kannst du eine der folgenden Optionen wählen:

• Static Generation mit Client-seitigem Datenabruf: Du kannst einige Teile einer Seite vom Vorrendern auslassen und dann clientseitiges JavaScript verwenden, um sie zu füllen. Um mehr über diesen Ansatz zu erfahren, sieh dir die Datenabruf-Dokumentation an.
• Verwendung von Server-Side Rendering: Next.js rendert eine Seite bei jeder Anfrage. Es wird langsamer sein, da die Seite nicht von einem CDN zwischengespeichert werden kann, aber die vorgerrenderte Seite wird immer aktuell sein. Wir werden diesen Ansatz unten besprechen.