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

Question

我正在使用 next.js 构建一个网站，并且我正在尝试解决以下“问题”。我有一些静态数据(网站文本)需要从 API 端点(Headless CMS)获取。

对于各个页面，我使用 getInitialProps 来获取所需的数据。不过，我的主布局中还有一个页脚组件。布局和页脚组件都没有 getInitialProps 解决方案，那么如何以“好”的方式处理这个问题？

我想到的一些解决方案:

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

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

Answer 1

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

首先，在App.getInitialProps中，获取服务器端所需的任何数据或执行任何操作。然后，您返回的数据可以作为 props 返回，并与 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} />