Как добавить глобальные данные в _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 (инкрементная статическая регенерация).
Как правильно это сделать?