getServerSideProps

Wenn Sie eine Funktion namens getServerSideProps (Server-Side Rendering) aus einer Seite exportieren, wird Next.js diese Seite bei jeder Anfrage mit den von getServerSideProps zurückgegebenen Daten vorrendern. 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 (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetServerSideProps<{
  repo: Repo
}>

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

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}

export default function Page({ repo }) {
  return repo.stargazers_count
}

Sie können Module im obersten Bereich importieren, um sie in getServerSideProps zu verwenden. Die verwendeten Importe werden nicht für die Client-Seite gebündelt. Das bedeutet, Sie können serverseitigen Code direkt in getServerSideProps schreiben, einschließlich des Abrufs von Daten aus Ihrer Datenbank.

Kontextparameter

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 als Props an die Seitenkomponente übergeben
  }
}

notFound

Der notFound-Boolean ermöglicht es der Seite, einen 404-Status und eine 404-Seite zurückzugeben. Mit notFound: true gibt die Seite einen 404 zurück, selbst wenn zuvor eine erfolgreich generierte Seite vorhanden war. Dies dient zur Unterstützung von Anwendungsfällen wie nutzergenerierten Inhalten, die vom Autor entfernt wurden.

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 als Props an die Seitenkomponente übergeben
  }
}

redirect

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

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 als Props an die Seitenkomponente übergeben
  }
}

Versionsverlauf