3

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

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

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

4

0 回答 0