getInitialProps

Wichtig: getInitialProps ist eine veraltete API. Wir empfehlen stattdessen die Verwendung von getStaticProps oder getServerSideProps.

getInitialProps ist eine async-Funktion, die der standardmäßig exportierten React-Komponente einer Seite hinzugefügt werden kann. Sie wird sowohl serverseitig als auch clientseitig während Seitenübergängen ausgeführt. Das Ergebnis der Funktion wird als props an die React-Komponente weitergegeben.

import { NextPageContext } from 'next'

Page.getInitialProps = async (ctx: NextPageContext) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default function Page({ stars }: { stars: number }) {
  return stars
}

Wichtig:

• Von getInitialProps zurückgegebene Daten werden beim Server-Rendering serialisiert. Stellen Sie sicher, dass das zurückgegebene Objekt ein einfaches Object ist und keine Date-, Map- oder Set-Objekte enthält.
• Beim ersten Laden der Seite wird getInitialProps nur auf dem Server ausgeführt. Bei Navigation zu einer anderen Route mit der next/link-Komponente oder durch Verwendung von next/router wird getInitialProps auch clientseitig ausgeführt.
• Wenn getInitialProps in einer benutzerdefinierten _app.js verwendet wird und die Zielseite getServerSideProps nutzt, wird getInitialProps ebenfalls auf dem Server ausgeführt.

Kontext-Objekt

getInitialProps erhält ein einzelnes Argument namens context, das ein Objekt mit folgenden Eigenschaften ist:

Einschränkungen

• getInitialProps kann nur in Top-Level-Dateien unter pages/ verwendet werden, nicht in verschachtelten Komponenten. Für verschachteltes Data Fetching auf Komponentenebene sollten Sie den App Router in Betracht ziehen.
• Unabhängig davon, ob Ihre Route statisch oder dynamisch ist, können alle von getInitialProps als props zurückgegebenen Daten im initialen HTML clientseitig eingesehen werden. Dies dient dazu, die Seite korrekt zu hydrieren. Stellen Sie sicher, dass Sie keine sensiblen Informationen in props übergeben, die clientseitig nicht verfügbar sein sollten.