如何从 Next.js 的服务器获取 HOC 中的数据？

Question

我使用 Next.js 9.3.1 创建了新应用。

在带有 SSR 的旧应用中，我可以在 HOC 组件（而不是页面）中使用 getInitialProps 函数，因此我可以在 HOC 组件和页面中从服务器获取数据。像这样https://gist.github.com/whoisryosuke/d034d3eaa0556e86349fb2634788a7a1

示例：

export default function withLayout(ComposedComponent) {
  return class WithLayout extends Component {
    static async getInitialProps(ctx) {
      console.log("ctxlayout fire");
      const { reduxStore, req } = ctx || {};
      const isServer = !!req;
      reduxStore.dispatch(actions.serverRenderClock(isServer));

      if (isServer)
        await reduxStore.dispatch(navigationActions.getListMenuAction("menu"));
      // Check if Page has a `getInitialProps`; if so, call it.
      const pageProps =
        ComposedComponent.getInitialProps &&
        (await ComposedComponent.getInitialProps(ctx));
      // Return props.
      return { ...pageProps };
    }

    render() {
      return (
        <div className="app__container">
          <Header />
          <Navbar />
          <ComposedComponent {...this.props} />
        </div>
      );
    }
  };
}

但是在带有 SSG 的新版本 Next.js 中，我找不到在 HOC 组件中使用 getStaticProps 或 getServerSideProps 的方法。如果我在 HOC（布局）中使用 getInitialProps，我将无法在 child.

中使用 getStaticProps 或 getServerSideProps

那么，如何在 HOC 组件和页面中使用 getStaticProps 或 getServerSideProps 来获取数据和预渲染？

Answer 1

因为 getServerSideProps/getStaticProps 需要直接从页面组件的文件中导出，所以您必须将该逻辑完全提取到一个单独的高阶函数 (HOF) 中。

您可以在 withLayout HOC 中保留 React 组件部分。

// hoc/with-layout.js
export default function withLayout(ComposedComponent) {
    return class WithLayout extends Component {
        render() {
            return (
                <div className="app__container">
                    <Header />
                    <Navbar />
                    <ComposedComponent {...this.props} />
                </div>
            );
        }
    };
}

getInitialProps 中的代码将移至单独的 HOF。这个 HOF 将接受一个 getServerSideProps 函数作为参数，return 另一个逻辑所在的函数。

// hoc/with-layout.js
export function withLayoutGSSP(gssp) {
    return async (context) => {
        //Add higher-order function logic here
        
        // Return by calling the passed `getServerSideProps` function
        return await gssp(context);
    };
}

然后可以在导出 getServerSideProps 函数的页面组件中按如下方式使用（对于您想要重用 HOC 的任何页面组件，都可以这样做）。

import withLayout, { withLayoutGSSP } from '<path-to>/hoc/with-layout'

const IndexPage = () => {
    // Your page component code
};

export const getServerSideProps = withLayoutGSSP(context => {
    // Your `getServerSideProps` code here
});

export default withLayout(IndexPage);

同样的方法可以用于 getStaticProps。

如何从 Next.js 的服务器获取 HOC 中的数据？

How to fetch data in HOC from server in Next.js?

reactjs

next.js

server-side-rendering

higher-order-components