getInitialProps

Bon à savoir : getInitialProps est une API héritée. Nous recommandons d'utiliser getStaticProps ou getServerSideProps à la place.

getInitialProps est une fonction async qui peut être ajoutée au composant React exporté par défaut pour la page. Elle s'exécutera à la fois côté serveur et à nouveau côté client lors des transitions de page. Le résultat de la fonction sera transmis au composant React sous forme de props.

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
}

Bon à savoir :

• Les données retournées par getInitialProps sont sérialisées lors du rendu côté serveur. Assurez-vous que l'objet retourné par getInitialProps est un simple Object, et n'utilise pas Date, Map ou Set.
• Pour le chargement initial de la page, getInitialProps s'exécutera uniquement côté serveur. getInitialProps s'exécutera également côté client lors de la navigation vers une autre route avec le composant next/link ou en utilisant next/router.
• Si getInitialProps est utilisé dans un _app.js personnalisé et que la page vers laquelle on navigue utilise getServerSideProps, alors getInitialProps s'exécutera également côté serveur.

Objet Context

getInitialProps reçoit un seul argument appelé context, qui est un objet avec les propriétés suivantes :

Mises en garde

• getInitialProps ne peut être utilisé que dans les fichiers de premier niveau de pages/, et non dans les composants imbriqués. Pour une récupération de données imbriquée au niveau du composant, envisagez d'explorer le Routeur d'application.
• Que votre route soit statique ou dynamique, toutes les données retournées par getInitialProps sous forme de props pourront être examinées côté client dans le HTML initial. Ceci permet à la page d'être hydratée correctement. Assurez-vous de ne pas transmettre d'informations sensibles qui ne devraient pas être disponibles côté client dans les props.