使用服务器端渲染获取数据的正确方法（Next.js，何时使用 componentDidMount 以及何时使用 componentWillMount）
Correct way to fetch data with server side rendering (Next.js, when to use componentDidMount and when to use componentWillMount)
我在 _app.js 页面中使用 Next.js（我们在其中设置一般的 webapp 状态）我需要在 header 中包含 2 种类型的数据（所以对于每个组件）。
1) 第一种是 header 信息，该信息应该在应用加载之前呈现。我将使用 get getInitialProps 来调用端点并将它们放入道具中，然后使用 componentWillMount 将它们添加到状态中。
2) 第二种类型是搜索组件的数据，它有很多数据，我并不特别介意在应用程序已经呈现时加载它，因为它不会显示在第一个用户视觉中。
所以我猜测这里最好使用 componentDidMount 和 asynchorslly 调用获取 serach object 数据的端点，而不是添加设置状态。
这个问题的目的是双重的：
1) 回顾 - 我是否正确地考虑了这一点，还是我错过了什么？
2) 问题 - 现在，当数据在第一次渲染后加载时，我像这样传递数据：_app.js -> 布局 -> 菜单 -> SearchBar
所以我的问题是，在我的 searchBar 中，我需要做一些类似
的事情
componentDidMount() {
this.setState({ options: this.props.searchBarSource })
}
但是，因为 _app.js 正在使用异步调用填充此数据，这是否意味着我将始终得到一个空的 object？
W什么是解决这个问题的正确方法？如果我将 TimeOut 设置为大约 3 秒，然后设置数据，这是一个正常的解决方案还是非常 hacky，还有更好的方法吗？
您的尝试是有道理的。来到 NextJS，您需要非常慎重地考虑哪些数据应该加载服务器端，哪些不应该加载。
这里有一些建议：
搜索组件中不需要setState，可以
使用 this.props.searchBarSource 作为 Kunukn 提及。
[注意 - 如果您正在组合 getInitialProps 和客户端（浅路由），当用户导航到新的客户端路由时，initialProps 将是未定义的。解决方法可能是将 initialProps 存储在 state 或本地存储中。]
getInitialProps的重点是在
组件安装。您将始终在 Promise 收到已解决的问题
componentDidMount，所以你的 this.props.searchBarSource 永远不会
为空（或更准确地说，pending）。
我在 _app.js 页面中使用 Next.js（我们在其中设置一般的 webapp 状态）我需要在 header 中包含 2 种类型的数据（所以对于每个组件）。
1) 第一种是 header 信息，该信息应该在应用加载之前呈现。我将使用 get getInitialProps 来调用端点并将它们放入道具中，然后使用 componentWillMount 将它们添加到状态中。
2) 第二种类型是搜索组件的数据，它有很多数据，我并不特别介意在应用程序已经呈现时加载它，因为它不会显示在第一个用户视觉中。 所以我猜测这里最好使用 componentDidMount 和 asynchorslly 调用获取 serach object 数据的端点，而不是添加设置状态。
这个问题的目的是双重的：
1) 回顾 - 我是否正确地考虑了这一点，还是我错过了什么？
2) 问题 - 现在，当数据在第一次渲染后加载时，我像这样传递数据：_app.js -> 布局 -> 菜单 -> SearchBar 所以我的问题是，在我的 searchBar 中，我需要做一些类似
的事情componentDidMount() {
this.setState({ options: this.props.searchBarSource })
}
但是，因为 _app.js 正在使用异步调用填充此数据，这是否意味着我将始终得到一个空的 object？ W什么是解决这个问题的正确方法？如果我将 TimeOut 设置为大约 3 秒，然后设置数据，这是一个正常的解决方案还是非常 hacky，还有更好的方法吗？
您的尝试是有道理的。来到 NextJS，您需要非常慎重地考虑哪些数据应该加载服务器端，哪些不应该加载。
这里有一些建议：
搜索组件中不需要
setState，可以 使用this.props.searchBarSource作为 Kunukn 提及。[注意 - 如果您正在组合
getInitialProps和客户端（浅路由），当用户导航到新的客户端路由时，initialProps将是未定义的。解决方法可能是将initialProps存储在state或本地存储中。]getInitialProps的重点是在 组件安装。您将始终在Promise收到已解决的问题componentDidMount，所以你的this.props.searchBarSource永远不会 为空（或更准确地说，pending）。