getInitialProps

Es bueno saberlo: getInitialProps es una API heredada. Recomendamos usar getStaticProps o getServerSideProps en su lugar.

getInitialProps es una función async que se puede agregar al componente React exportado por defecto de una página. Se ejecutará tanto en el lado del servidor como nuevamente en el lado del cliente durante las transiciones de página. El resultado de la función se pasará al componente React como 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
}

Es bueno saberlo:

• Los datos devueltos por getInitialProps se serializan al renderizar en el servidor. Asegúrate de que el objeto devuelto por getInitialProps sea un Object simple, y no uses Date, Map o Set.
• Para la carga inicial de la página, getInitialProps solo se ejecutará en el servidor. getInitialProps también se ejecutará en el cliente al navegar a una ruta diferente con el componente next/link o usando next/router.
• Si se usa getInitialProps en un _app.js personalizado y la página a la que se navega usa getServerSideProps, entonces getInitialProps también se ejecutará en el servidor.

Objeto Contexto

getInitialProps recibe un único argumento llamado context, que es un objeto con las siguientes propiedades:

Consideraciones

• getInitialProps solo se puede usar en archivos de nivel superior en pages/, y no en componentes anidados. Para obtener datos anidados a nivel de componente, considera explorar el App Router.
• Independientemente de si tu ruta es estática o dinámica, cualquier dato devuelto por getInitialProps como props podrá examinarse en el lado del cliente en el HTML inicial. Esto es para permitir que la página se hidrate correctamente. Asegúrate de no pasar ninguna información sensible que no deba estar disponible en el cliente a través de props.