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

Posted 2023-02-23

【中文标题】如何从 Next.js 中的服务器获取 HOC 中的数据？

【英文标题】：How to fetch data in HOC from server in Next.js?

【发布时间】：2020-07-03 19:04:03

【问题描述】：

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

在带有 s-s-r 的旧应用程序中，我可以在 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，我将无法在子组件中使用 getStaticProps 或 getServerSideProps。

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

【参考方案1】：

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

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

// 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 函数作为参数，并返回逻辑所在的另一个函数。

// 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。