Server-seitiges Rendering (SSR)

Auch bekannt als "SSR" oder "Dynamisches Rendering".

Wenn eine Seite Server-seitiges Rendering (SSR) verwendet, wird das HTML der Seite bei jeder Anfrage neu generiert.

Um SSR für eine Seite zu nutzen, müssen Sie eine async-Funktion namens getServerSideProps exportieren. Diese Funktion wird bei jeder Anfrage vom Server aufgerufen.

Angenommen, Ihre Seite muss häufig aktualisierte Daten (abgerufen von einer externen API) vorab rendern. Sie können getServerSideProps schreiben, das diese Daten abruft und an die Page wie folgt übergibt:

export default function Page({ data }) {
  // Daten rendern...
}

// Diese Funktion wird bei jeder Anfrage aufgerufen
export async function getServerSideProps() {
  // Daten von externer API abrufen
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Daten via Props an die Seite übergeben
  return { props: { data } }
}

Wie Sie sehen, ähnelt getServerSideProps getStaticProps, der Unterschied besteht jedoch darin, dass getServerSideProps bei jeder Anfrage und nicht nur beim Build ausgeführt wird.

Weitere Informationen zur Funktionsweise von getServerSideProps finden Sie in unserer Dokumentation zur Datenabfrage.