Server-Side-Rendering (SSR)

Wird auch als „SSR" oder „Dynamisches Rendering" bezeichnet.

Wenn eine Seite Server-Side-Rendering verwendet, wird die Seiten-HTML bei jeder Anfrage generiert.

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

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

export default function Page({ data }) {
  // Daten rendern...
}
 
// Dies 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, ähnelt getServerSideProps getStaticProps, aber der Unterschied besteht darin, dass getServerSideProps bei jeder Anfrage ausgeführt wird und nicht zur Build-Zeit.

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