Question

我正在使用next.js建立一个网站，我试图围绕以下问题＆＃34;问题＆＃34 ;.我有一些需要从API端点（无头CMS）获取的静态数据（网站文本）。

对于单个页面，我使用getInitialProps来获取所需的数据。但是我的主要布局中也有一个页脚组件。布局和页脚组件都没有getInitialProps解决方案，所以如何在＆＃34; nice＆＃34;中解决这个问题。方式是什么？

我想到的一些解决方案：

我可以使用componentDidMount对页脚组件中的数据进行客户端获取（但我真的想要服务器获取/使其静态）。
将页脚移动到每个页面并使getInitialProps可用，添加一些HOC以防止重写所有代码。
正如我所说的那样，数据是静态的，所以通过server.js或_document.js全局可用（虽然我不知道如何实现这一点）。

任何能指出正确方向的人？

Answer 1

您可以将页眉和页脚组件放在_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} />

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

1 个答案: