如何在 Next.js 中将全局数据添加到 _app.tsx 而不导致整个应用程序被服务器端渲染即：禁用自动静态优化？

问题描述

我正在使用 React、Redux 和 Firebase 构建 Next.js 应用。

我的应用程序的状态分为两种。一个是全局的（应该进入 Redux 商店），另一个是每个特定页面的本地。

我将预渲染页面（它们需要数据），因此我将向每个页面添加一个 getStaticProps 函数。但是要使任何页面正确呈现，它还需要“全局”状态。

在每个页面 getStaticProps 函数中构建和添加全局状态将是非常重复的。我想在一个地方完成，并确保 Next.js 将全局状态添加到每个页面渲染中。

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

从上面的链接来看，似乎可以在自定义 _app.tsx 文件中执行此操作：

这是示例代码：

// 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，它会禁用执行自动静态优化的能力，导致您的应用程序中的每个页面都在服务器端呈现。

而且我不希望我的应用程序完全在服务器端呈现。我希望它使用带有重新验证选项（增量静态再生）的静态侧生成。

这样做的正确方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）