Next.js中的getInitialProps是什么

Question

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

Answer 1

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

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

[上面的语句仅在您首次尝试打开页面时才有效，之后，无论您将提取代码放在何处，所有内容都会在浏览器中发生，更多信息{{ 3}}]

---

比较

nextjs的作用是，它在将您的React应用程序移交给用户的浏览器之前在服务器上运行。这样，它将返回完全渲染的HTML，内容已完全加载。

使用普通的React应用：

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

使用Next.js：

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