Server-seitiges Rendering (SSR)

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

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

Um Server-seitiges Rendering für eine Seite zu verwenden, 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...
}

// 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 über Props an die Seite übergeben
  return { props: { data } }
}

Wie Sie sehen können, ähnelt getServerSideProps getStaticProps, der Unterschied besteht jedoch darin, dass getServerSideProps bei jeder Anfrage und nicht zum Build-Zeitpunkt ausgeführt wird.

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