Next.js中的getInitialProps是什么

Question

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

Answer 1

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

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

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

---

比较

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发送到您的浏览器