Next.js 中的 getInitialProps 是什么

Question

我认为这可能是一个愚蠢的问题，但相信我，我是 Next.js 的新手，我正在尝试完全理解生命getInitialProps周期挂钩的工作原理。我做了一些查询，但仍然无法有效地使用它。我所理解的是，它getInitialProps用于在服务器上获取数据，但是，如果我们已经有一个http类似axios等的库，我仍然对如何在服务器上执行此操作感到困惑。有人可以帮助回答我的问题吗？为什么我们需要getInitialPropNext.js？

Answer 1

您可能会使用 axios 或其他任何东西来进行 http 调用，重要的是您在服务器上的何处进行 http 调用？或者在用户的浏览器上？

如果将获取代码放在componentDidMount()生命周期挂钩上，它将始终在浏览器上运行，如果将其放在生命周期挂钩上，getInitialProps()它将在服务器上运行。

[上述声明仅在您第一次尝试打开页面时有效，之后无论您将获取代码放在何处，所有内容都会在浏览器上发生，更多信息请参见此处]

比较

nextjs 的作用是，它在服务器上运行您的 React 应用程序，然后将其移交给用户的浏览器。通过这样做，它会返回一个完全呈现的 HTML，其中内容已完全加载。

使用普通的 React 应用程序：

1. 您的浏览器请求index.html
2. React 应用程序已加载到您的浏览器中并调用componentDidMount()
3. 获取数据并相应更改状态
4. React 在浏览器上呈现获取的内容

使用 Next.js：

1. 您的浏览器请求index.html
2. Nextjs 获取您的 React 应用程序并调用getInitialProps
3. 获取数据并将道具传递给您的组件
4. React 为 Next.js 呈现获取的内容
5. Nextjs 将渲染的 HTML 发送到您的浏览器