getServerSideProps

Wenn Sie eine Funktion namens getServerSideProps (Server-Side Rendering) von 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 () => {
  // 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>
  )
}

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 über Props an die Seite übergeben
  return { props: { repo } }
}

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

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 Abrufens von Daten aus Ihrer Datenbank.

Kontext-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 fantastisch` }, // 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, auch wenn zuvor erfolgreich eine Seite generiert wurde. 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