getServerSideProps

Wenn eine Funktion namens getServerSideProps (Server-Side Rendering) von einer Seite exportiert wird, rendert Next.js diese Seite bei jeder Anfrage mit den von getServerSideProps zurückgegebenen Daten vor. Dies ist nützlich, wenn Sie Daten abrufen möchten, die sich häufig ändern, und die Seite aktualisieren möchten, um die aktuellsten Daten anzuzeigen.

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>
  )
}

Sie können Module im Bereich der obersten Ebene für die Verwendung in getServerSideProps importieren. Importierte Module werden nicht für die Clientseite gebündelt. Das bedeutet, Sie können serverseitigen Code direkt in getServerSideProps schreiben, einschließlich des Abrufens von Daten aus Ihrer Datenbank.

Context-Parameter

Der context-Parameter ist ein Objekt mit den folgenden Schlüsseln:

Rückgabewerte von getServerSideProps

Die getServerSideProps-Funktion sollte ein Objekt mit einer der folgenden Eigenschaften zurückgeben:

props

Das props-Objekt ist ein Schlüssel-Wert-Paar, wobei jeder Wert von der Seitenkomponente empfangen wird. Es sollte ein serialisierbares Objekt sein, sodass alle übergebenen Props mit JSON.stringify serialisiert werden können.

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js ist großartig` }, // wird der Seitenkomponente als Props übergeben
  }
}

notFound

Der boolesche Wert notFound ermöglicht es der Seite, einen 404-Status und eine 404-Seite zurückzugeben. Mit notFound: true gibt die Seite einen 404 zurück, auch wenn zuvor eine erfolgreich generierte Seite existierte. Dies soll Anwendungsfälle wie das Entfernen von benutzergeneriertem Inhalt durch seinen Autor unterstützen.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  if (!data) {
    return {
      notFound: true,
    }
  }
 
  return {
    props: { data }, // wird der Seitenkomponente als Props übergeben
  }
}

redirect

Das redirect-Objekt ermöglicht die Weiterleitung zu internen und externen Ressourcen. Es sollte der Form { destination: string, permanent: boolean } entsprechen. In seltenen Fällen müssen Sie möglicherweise einen benutzerdefinierten Statuscode für ältere HTTP-Clients zuweisen, um korrekt weiterzuleiten. In diesen Fällen können Sie die statusCode-Eigenschaft anstelle der permanent-Eigenschaft verwenden, aber nicht beide.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }
 
  return {
    props: {}, // wird der Seitenkomponente als Props übergeben
  }
}

Versionshistorie