Next.js 中的 getInitialProps 是什么

Question

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

Answer 1

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

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

[以上语句仅在您第一次尝试打开页面时有效，之后无论您将获取代码放在何处，一切都会在浏览器上发生，更多信息 here]

---

比较

nextjs 所做的是，它 运行 在将您的 React 应用程序移交给用户的浏览器之前，将其放在服务器上。通过这样做，它 returns 完全呈现 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 发送到您的浏览器