getInitialProps

Полезно знать: getInitialProps — это устаревший API. Рекомендуется использовать getStaticProps или getServerSideProps.

getInitialProps — это асинхронная функция, которую можно добавить в экспортируемый по умолчанию React-компонент страницы. Она выполняется как на стороне сервера, так и на стороне клиента при переходах между страницами. Результат функции передаётся в React-компонент в качестве 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
}

Полезно знать:

• Данные, возвращаемые getInitialProps, сериализуются при серверном рендеринге. Убедитесь, что возвращаемый объект — это простой Object, а не Date, Map или Set.
• При первоначальной загрузке страницы getInitialProps выполняется только на сервере. При переходе на другой маршрут с помощью компонента next/link или next/router функция также выполняется на клиенте.
• Если getInitialProps используется в кастомном _app.js, а целевая страница использует getServerSideProps, то getInitialProps также выполнится на сервере.

Объект Context

getInitialProps принимает один аргумент context — объект со следующими свойствами:

Ограничения

• getInitialProps можно использовать только в файлах верхнего уровня pages/, но не во вложенных компонентах. Для получения данных на уровне компонентов рассмотрите возможность использования App Router.
• Независимо от того, является ли маршрут статическим или динамическим, любые данные, возвращаемые getInitialProps как props, будут доступны для просмотра на стороне клиента в исходном HTML. Это необходимо для корректной гидратации страницы. Убедитесь, что вы не передаёте в props никакой конфиденциальной информации, которая не должна быть доступна на клиенте.