使用 NextJS 并看到一个页面示例：
class IndexPage extends Component {
static async getInitialProps(context) {
return {};
}
render() {
return <div>hello world</div>;
}
}
export default withRouter(IndexPage);
NextJS 中的 getInitialProps 方法究竟是什么？
NextJS：getInitialProps 方法
IT技术
javascript
reactjs
next.js
2021-04-27 16:40:50
4个回答
getInitialProps 通常是一个异步函数，它有利于在服务器上进行异步操作，然后将数据作为 props 传递到页面。
它可以在服务器和浏览器上运行（Link例如，如果您使用）。
我的结论是，getInitialProps当您的组件充当 Page 并且您希望将数据作为 Props 提供时，可以使用它来获取数据。
文档：https : //nextjs.org/learn/basics/fetching-data-for-pages
请注意，要在页面加载时加载数据，我们使用 getInitialProps，它是一个异步静态方法。它可以异步获取任何解析为 JavaScript 普通对象的内容，该对象填充props。
从 getInitialProps 返回的数据在服务器渲染时被序列化，类似于 JSON.stringify。确保从 getInitialProps 返回的对象是一个普通对象，而不是使用 Date、Map 或 Set。
对于初始页面加载，getInitialProps 将仅在服务器上执行。getInitialProps 只会在通过 Link 组件导航到不同路由或使用路由 API 时在客户端上执行。
注意：getInitialProps 不能在子组件中使用。仅在页面中。
获取初始props
- 用于异步获取一些数据，然后填充props。
- 对于初始页面加载，getInitialProps 将仅在服务器上执行。
- 只有当通过 next/link 组件或使用 next/router 导航到不同的路由时，才会在客户端上执行。
- 不能在子组件中使用，只能在每个页面的默认导出中使用。
如果您使用 Next.js 9.3 或更新版本，建议您使用getStaticProps或getServerSideProps代替getInitialProps。
这些新的数据获取方法允许您在静态生成和服务器端渲染之间进行精细的选择。
来源：https : //nextjs.org/docs/api-reference/data-fetching/getInitialProps
使用动机getInitialProps：
所有这些答案都是正确的，但我想补充一点，NextJS它进行服务器端渲染。这意味着，如果您想在向用户显示您无法使用的内容之前获取数据componentDidMount（因为这是在渲染之后发生的）。
所以你需要使用，getInitialProps因为它是先执行的，然后是 NextJS 渲染页面。然后 NextJS 获取生成的组件的 HTML 并将其发送到浏览器。