getInitialProps

Wichtig zu wissen: 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 erneut 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
}

Page.getInitialProps = async (ctx) => {
  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 }) {
  return stars
}

Wichtig zu wissen:

• Von getInitialProps zurückgegebene Daten werden beim Server-Rendering serialisiert. Stellen Sie sicher, dass das zurückgegebene Objekt von getInitialProps ein einfaches Object ist und keine Date, Map oder Set verwendet.
• Für das initiale Laden der Seite wird getInitialProps nur auf dem Server ausgeführt. getInitialProps wird dann auch auf dem Client ausgeführt, wenn zu einer anderen Route mit der next/link-Komponente oder durch die Verwendung von next/router navigiert wird.
• Wenn getInitialProps in einer benutzerdefinierten _app.js verwendet wird und die Seite, zu der navigiert wird, getServerSideProps verwendet, dann wird getInitialProps auch auf dem Server ausgeführt.

Kontext-Objekt

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

Einschränkungen

• getInitialProps kann nur in pages/-Top-Level-Dateien verwendet werden und nicht in verschachtelten Komponenten. Für verschachteltes Daten-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 clientseitig im initialen HTML untersucht 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.