NextJS: getInitialProps方法

Question

使用NextJS并看到了一个页面示例：

class IndexPage extends Component {
  static async getInitialProps(context) {
    return {};
  }
  render() {
    return <div>hello world</div>;
  }
}
export default withRouter(IndexPage);

getInitialProps方法在NextJS中到底是什么？

Answer 1

getInitialProps通常是一个异步函数，用于服务器上的异步操作，然后将数据作为支持传递到页面。

它既可以在服务器上运行，也可以在浏览器上运行(例如，如果使用Link )。

我的结论是，当组件充当页面时，使用getInitialProps来获取数据，并且希望以支持的形式提供数据。

博士：https://nextjs.org/learn/basics/fetching-data-for-pages

Answer 2

注意，要在页面加载时加载数据，我们使用getInitialProps，这是一种异步静态方法。它可以异步获取解析为JavaScript普通对象的任何内容，后者填充道具。

服务器呈现时会序列化从getInitialProps返回的数据，类似于JSON.stringify。确保getInitialProps返回的对象是普通对象，而不是使用日期、地图或集合。

对于初始页面加载，getInitialProps将仅在服务器上执行。只有在通过Link组件导航到另一条路由或使用路由API时，getInitialProps才会在客户端上执行。

注意: getInitialProps不能在子组件中使用。只写几页。

Answer 3

getInitialProps

• 用于异步获取一些数据，然后填充道具。
• 对于初始页面加载，getInitialProps将仅在服务器上执行。
• 只有在通过next/link组件或使用next/路由器导航到另一条路由时，才能在客户端上执行。
• 不能在子组件中使用，只能在每个页面的默认导出中使用。

如果您使用的是Next.js 9.3或更高版本，建议您使用getStaticProps或getServerSideProps而不是getInitialProps。

这些新的数据获取方法允许您在静态生成和服务器端呈现之间进行粒度选择。

来源：https://nextjs.org/docs/api-reference/data-fetching/getInitialProps