getServerSideProps

getServerSideProps ist eine Next.js-Funktion, mit der Daten abgerufen und der Inhalt einer Seite zum Zeitpunkt der Anfrage gerendert werden kann.

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 die Daten 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 über 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 nur zum Zeitpunkt der Anfrage bekannt sind. Beispielsweise Authorization-Header oder eine Geolokalisierung.

Wenn Sie die Daten nicht zum Zeitpunkt der Anfrage abrufen müssen oder die Daten und vorgerenderte HTML lieber zwischenspeichern möchten, empfehlen wir die Verwendung von getStaticProps.

Verhalten

• getServerSideProps wird auf dem Server ausgeführt.
• getServerSideProps kann nur von einer Seite exportiert werden.
• getServerSideProps gibt JSON zurück.
• Wenn ein Benutzer eine Seite besucht, wird getServerSideProps verwendet, um Daten zum Zeitpunkt der Anfrage abzurufen, und die Daten werden verwendet, um das ursprüngliche HTML der Seite zu rendern.
• Props, die an die Seitenkomponente übergeben werden, können auf dem Client als Teil des ursprünglichen HTML-Codes angezeigt werden. Dies dient dazu, die Seite korrekt zu hydratisieren. Achten Sie darauf, 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, der getServerSideProps ausführt.
• Sie müssen keine Next.js API-Route aufrufen, um Daten zu laden, 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 APIs von Drittanbietern aufrufen.

Hinweis:

• Weitere Informationen finden Sie in der getServerSideProps-API-Referenz für Parameter und Eigenschaften, 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. Weitere Informationen zum Erstellen einer solchen Seite finden Sie in der Dokumentation zur 500-Seite. Während der Entwicklung wird diese Datei nicht verwendet, stattdessen wird der Entwicklungsfehler-Overlay angezeigt.

Randfälle

Zwischenspeichern mit Server-Side Rendering (SSR)

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

// Dieser Wert gilt für zehn Sekunden als aktuell (s-maxage=10).
// Wenn eine Anfrage innerhalb der nächsten 10 Sekunden wiederholt wird, bleibt der 
// zuvor zwischengespeicherte Wert noch aktuell. Wenn die Anfrage vor 59 Sekunden 
// wiederholt wird, bleibt der zwischengespeicherte Wert veraltet, wird aber weiterhin 
// gerendert (stale-while-revalidate=59).
//
// Im Hintergrund wird eine Neubewertungsanfrage gestellt, um den Cache 
// mit einem aktuellen Wert zu aktualisieren. 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 zu Ihrem Anwendungsfall passt.