Блог

Я знаю, что тема не новая, и я нашел (и прочитал) несколько обсуждений. Чего я не смог найти, так это ответа на мой все еще остающийся вопрос.

Как другие решают проблему невозможности использования getStaticProps в _app.js ? getInitialProps — это не вариант для меня, потому что я хочу использовать SSG. Есть ли способ принудительно использовать SSG даже при использовании getInitialProps? Или мне действительно нужно извлекать все мои данные из моей безголовой CMS на каждой странице? Так как я хочу создать заголовок (включая навигацию) и нижний колонтитул, например. В настоящее время единственный вариант, который я вижу, — это повторять много кода.

Любые подсказки приветствуются и спасибо за чтение!

Next.js рекомендует использовать getStaticProps или getServerSideProps вместо getInitialProps для получения наилучшей производительности от Next.js .

Если вы используете Next.js 9.3 или новее, мы рекомендуем вам использовать getStaticProps или getServerSideProps вместо getInitialProps.

Причина, почему Next.js рекомендуется, чтобы getInitialProps отключал автоматическую статическую оптимизацию и использовал рендеринг на стороне сервера.

Использование getInitialProps в вашем _app.js отключит автоматическую статическую оптимизацию для всех страниц вашего приложения. Кроме того, это заставит все ваши страницы генерироваться при каждом запросе, поскольку они используют рендеринг на стороне сервера, что приведет к неправильному времени для первого байта (TTFB).

Я составил шпаргалку о Next.js рендеринг страницы с живой демонстрацией и примерами кода на Github поможет быстро понять, как это работает. Это поможет вам выбрать правильную стратегию рендеринга страницы с Next.js в зависимости от вашего варианта использования.

Есть ли способ принудительно использовать SSG даже при использовании getInitialProps

Нет. Хотя команда Nextjs работает над добавлением поддержки getStaticProps for _app.js , в настоящее время она отключает статическую оптимизацию.

Как рекомендует nextjs, вы должны использовать getStaticProps, когда «данные поступают из безголовой CMS».

Таким образом, вам придется выполнять ту же логику на каждой странице, которая нуждается в запросе. Обратите внимание, что можно извлечь эту логику в функцию и повторно использовать ее везде

getData.js

 export async function getData({ req, res }) {
  const data = await getData();

  return { props: { data: data} };
}
  

pages/example.js

 export const getStaticProps = getData
  

В качестве другого варианта вы можете извлекать данные один раз в getInitialProps.

Легко настроить (но помните, что вы потеряете статическую оптимизацию.)

_app.js

 App.getInitialProps = ({ req, res }) => {
  const data = await getData();

  return { props: { data: data} };
}