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 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 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 der 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 pages/-Top-Level-Dateien verwendet werden, nicht in verschachtelten Komponenten. Für verschachtelte Datenabfragen 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 hydrieren zu können. Stellen Sie sicher, dass Sie keine sensiblen Informationen in props übergeben, die nicht clientseitig verfügbar sein sollten.