getServerSideProps

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

Beispiel

Sie können getServerSideProps verwenden, indem Sie es aus einer Page-Komponente exportieren. Das folgende Beispiel zeigt, wie Sie Daten von einer externen API in getServerSideProps abrufen und 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>
  )
}

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

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

Wann sollte getServerSideProps verwendet werden?

Sie sollten getServerSideProps verwenden, wenn Sie eine Seite rendern müssen, die von personalisierten Benutzerdaten oder Informationen abhängt, die erst zur Request-Zeit bekannt sind. Beispiele hierfür sind authorization-Header oder Geolocation-Daten.

Wenn Sie die Daten nicht zur Request-Zeit abrufen müssen oder die Daten und das vorgerenderte HTML zwischengespeichert werden sollen, 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 Request-Zeit abzurufen, und diese Daten werden verwendet, um das initiale HTML der Seite zu rendern.
• Die an die Page-Komponente übergebenen props können auf dem Client als Teil des initialen HTML eingesehen werden. Dies dient dazu, die Hydration der Seite korrekt durchzuführen. 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 aufruft, sendet Next.js einen API-Request an den Server, der 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 ansprechen.

Gut zu wissen:

• Siehe die 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-Bundle entfernt.

Fehlerbehandlung

Wenn in 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 und stattdessen das Entwicklungs-Fehler-Overlay angezeigt.

Besondere Fälle

Edge Runtime

getServerSideProps kann sowohl mit Serverless- als auch Edge-Runtimes verwendet werden, und Sie können in beiden Props setzen.

Allerdings haben Sie in der Edge Runtime derzeit keinen Zugriff auf das Response-Objekt. Das bedeutet, dass Sie beispielsweise keine Cookies in getServerSideProps hinzufügen können. Um auf das Response-Objekt zugreifen zu können, sollten Sie weiterhin die Node.js-Runtime verwenden, die die Standard-Runtime ist.

Sie können die Runtime pro Seite explizit festlegen, indem Sie die config anpassen, zum Beispiel:

export const config = {
  runtime: 'nodejs', // oder "edge"
}

export const getServerSideProps = async () => {}

Caching mit Server-seitigem Rendering (SSR)

Sie können Caching-Header (Cache-Control) in getServerSideProps verwenden, um dynamische Responses zwischenzuspeichern. Beispielsweise mit stale-while-revalidate.

// Dieser Wert gilt für zehn Sekunden als frisch (s-maxage=10).
// Wenn ein Request innerhalb der nächsten 10 Sekunden wiederholt wird, wird der zwischengespeicherte Wert noch als frisch betrachtet. Wenn der Request vor 59 Sekunden wiederholt wird, ist der zwischengespeicherte Wert zwar veraltet, wird aber trotzdem gerendert (stale-while-revalidate=59).
//
// Im Hintergrund wird ein Revalidation-Request durchgeführt, 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.