如何解决如何在 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 举报,一经查实,本站将立刻删除。