Как добавить глобальные данные в _app.tsx в Next.js, не вызывая рендеринга всего приложения на стороне сервера (то есть: отключение автоматической статической оптимизации)?

Я создаю приложение Next.js с React, Redux и Firebase.

Состояние моего приложения как бы разделено на два типа. Один глобальный (и должен идти в магазин Redux), а другой - локальный для каждой конкретной страницы.

Я буду выполнять предварительный рендеринг страниц (им нужны данные), поэтому я добавляю функцию на каждую страницу. Но для правильного отображения любой страницы ей также необходимо «глобальное» состояние.

Было бы очень однообразно создавать и добавлять глобальное состояние на каждой странице. getStaticPropsфункция. Я хотел бы сделать это в одном месте и убедиться, что Next.js будет добавлять это глобальное состояние к каждой отрисовке страницы.

https://nextjs.org/docs/advanced-features/custom-app

Из приведенной выше ссылки кажется, что это можно сделать в настраиваемом файле:

Это пример кода:

      // import App from 'next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp

Из комментария выше кажется, что если я использую getInitialProps на _app.tsxон отключит возможность выполнять автоматическую статическую оптимизацию, в результате чего каждая страница в вашем приложении будет отображаться на стороне сервера.

И я не хочу, чтобы мое приложение рендерилось полностью на стороне сервера. Я не хотел использовать статическую генерацию стороны с опцией revalidate (инкрементная статическая регенерация).

Как правильно это сделать?

0 ответов

Другие вопросы по тегам