getServerSideProps

getServerSideProps ist eine Next.js-Funktion, die verwendet werden kann, um Daten abzurufen und den Inhalt einer Seite zur Laufzeit der Anfrage zu rendern.

Beispiel

Sie können getServerSideProps verwenden, indem Sie es aus einer Seitenkomponente exportieren. Das folgende Beispiel zeigt, wie Sie Daten von einer externen API in getServerSideProps abrufen und diese als Props an die Seite übergeben können:

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async () => {
  // Daten von externer API abrufen
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Daten als Props an die Seite übergeben
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>

export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

Wann sollte ich getServerSideProps verwenden?

Sie sollten getServerSideProps verwenden, wenn Sie eine Seite rendern müssen, die von personalisierten Benutzerdaten oder Informationen abhängt, die erst zur Laufzeit der Anfrage bekannt sind. Zum Beispiel authorization-Header oder Geolokalisierungsdaten.

Wenn Sie die Daten nicht zur Laufzeit der Anfrage abrufen müssen oder die Daten und vorgerendertes HTML zwischenspeichern möchten, empfehlen wir die Verwendung von getStaticProps.

Verhalten

• getServerSideProps läuft auf dem Server.
• getServerSideProps kann nur von einer Seite exportiert werden.
• getServerSideProps gibt JSON zurück.
• Wenn ein Benutzer eine Seite besucht, wird getServerSideProps verwendet, um Daten zur Laufzeit der Anfrage abzurufen, und diese Daten werden verwendet, um das initiale HTML der Seite zu rendern.
• Die an die Seitenkomponente übergebenen props können auf dem Client als Teil des initialen HTML eingesehen werden. Dies dient dazu, die Seite korrekt zu hydrieren. Stellen Sie sicher, dass Sie keine sensiblen Informationen in props übergeben, die nicht auf dem Client verfügbar sein sollten.
• Wenn ein Benutzer die Seite über next/link oder next/router besucht, sendet Next.js eine API-Anfrage an den Server, die getServerSideProps ausführt.
• Sie müssen keine Next.js-API-Route aufrufen, um Daten abzurufen, wenn Sie getServerSideProps verwenden, da die Funktion auf dem Server läuft. Stattdessen können Sie direkt aus getServerSideProps heraus ein CMS, eine Datenbank oder andere externe APIs aufrufen.

Gut zu wissen:

• Siehe getServerSideProps API-Referenz für Parameter und Props, die mit getServerSideProps verwendet werden können.
• Sie können das next-code-elimination tool verwenden, um zu überprüfen, was Next.js aus dem Client-seitigen Bundle entfernt.

Fehlerbehandlung

Wenn innerhalb von getServerSideProps ein Fehler auftritt, wird die Datei pages/500.js angezeigt. Lesen Sie die Dokumentation zur 500-Seite, um mehr über deren Erstellung zu erfahren. Während der Entwicklung wird diese Datei nicht verwendet, stattdessen wird das Entwicklungsfehler-Overlay angezeigt.

Besondere Fälle

Caching mit Server-seitigem Rendering (SSR)

Sie können Caching-Header (Cache-Control) innerhalb von getServerSideProps verwenden, um dynamische Antworten zwischenzuspeichern. Zum Beispiel mit stale-while-revalidate.

// Dieser Wert gilt für zehn Sekunden als frisch (s-maxage=10).
// Wenn eine Anfrage innerhalb der nächsten 10 Sekunden wiederholt wird, wird der zwischengespeicherte Wert weiterhin als frisch betrachtet. Wenn die Anfrage vor 59 Sekunden wiederholt wird, wird der zwischengespeicherte Wert als veraltet betrachtet, aber dennoch gerendert (stale-while-revalidate=59).
//
// Im Hintergrund wird eine Revalidierungsanfrage gestellt, um den Cache mit einem frischen Wert zu füllen. Wenn Sie die Seite aktualisieren, sehen Sie den neuen Wert.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

Bevor Sie jedoch cache-control verwenden, empfehlen wir zu prüfen, ob getStaticProps mit ISR besser für Ihren Anwendungsfall geeignet ist.