getInitialProps

Важно знать: getInitialProps — это устаревший API. Мы рекомендуем использовать getStaticProps или getServerSideProps вместо него.

getInitialProps — это async функция, которую можно добавить к экспортируемому по умолчанию компоненту 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
}

Важно знать:

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

Объект контекста

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

Ограничения

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