javascript - 全局布局组件中的next.js getInitialProps

我正在使用next.js建立一个网站，并且试图绕过以下“问题”。我有一些静态数据（网站文本）需要从API端点（无头CMS）中获取。

对于单个页面，我使用getInitialProps来获取所需的数据。但是，我的主要布局中也有一个页脚组件。布局和页脚组件都没有getInitialProps解决方案，那么如何以一种“不错”的方式处理呢？

我想到的一些解决方案：


我可以使用componentDidMount对页脚组件中的数据进行客户端获取（但我确实想对服务器进行获取/使其静态）。
将页脚移动到每个页面并提供getInitialProps，并添加一些HOC以防止重写所有代码。
正如我所说的，数据是静态的，因此可以通过server.js或_document.js使其在全球范围内可用（尽管我不知道该如何完成）。


有人能指出我正确的方向吗？

最佳答案

您可以将页眉和页脚组件放在_app.js中。

首先，在App.getInitialProps中，获取任何数据或执行服务器端所需的任何操作。然后，您返回的数据可以作为prop返回，并与Component.getInitialProps的结果（页面组件的getInitialProps）结合起来。

static async getInitialProps({ Component, ctx }) {
  let pageProps = {};

  // Make any initial calls we need to fetch data required for SSR
  const isAuthed = await ctx.reduxStore.dispatch(checkAuth());

  // Load the page getInitiaProps
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps({ isAuthed, ...ctx });
  }

  return { pageProps: { ...pageProps, isAuthed } };
  // Or, if the async data is separate from your page props:
  // { pageProps, data: { isAuthed } };
}

在渲染功能中，您可以访问this.props.pageProps（或this.props.data（如果分开的话））。然后，您可以将其传递到页眉和页脚。

<Header {...pageProps} />
  <main>
    <Component {...pageProps} />
  </main>
<Footer {...pageProps} />

关于javascript - 全局布局组件中的next.js getInitialProps，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49303229/