reactjs - 使用服务器端渲染获取数据的正确方法(Next.js，何时使用 componentDidMount 以及何时使用 componentWillMount)

Question

我正在使用 Next.js，在 _app.js 页面(我们设置一般 webapp 状态的地方)我有 2 种类型的数据，我需要在标题中包含这些数据(因此对于每个组件)。

1) 第一种是标题信息，该信息应在应用加载之前呈现。我将使用 get getInitialProps 调用端点并将它们放入 Prop 中，然后使用 componentWillMount 将它们添加到状态中。

2) 第二种类型是搜索组件的数据，它有很多数据，我并不特别介意在应用程序已经呈现时加载它，因为它不会显示在第一个用户视觉中。所以我猜测在这里最好使用 componentDidMount 和 asynchorslly 调用获取 serach 对象数据的端点，而不是添加设置状态。

这个问题的目的是双重的:

1) 回顾 - 我是否正确地考虑了这一点，还是我错过了什么？

2) 问题 - 现在，当数据在第一次渲染后加载时，我像这样传递数据:_app.js -> Layout -> Menu -> SearchBar所以我的问题是，在我的 searchBar 中我需要做类似的事情

componentDidMount() {
    this.setState({ options: this.props.searchBarSource })
}

但是，因为 _app.js 使用异步调用填充此数据，这是否意味着我将始终得到一个空对象？W什么是解决这个问题的正确方法？如果我将 TimeOut 设置为大约 3 秒，然后设置数据，这是一个正常的解决方案还是非常 hacky，还有更好的方法吗？

Answer 1

您的尝试是有道理的。来到 NextJS，您需要非常慎重地考虑哪些数据应该加载服务器端，哪些不应该加载。

这里有一些提示:

1. 搜索组件中不需要setState，可以使用 this.props.searchBarSource 作为 Kunukn提到。

   [注意 - 如果您正在组合 getInitialProps 和客户端(浅层路由)，当用户导航到新的客户端路由时，initialProps 将是未定义的。解决方法可能是将 initialProps 存储在 state 或本地存储中。]

2. getInitialProps 的要点是在组件安装。您将始终收到已解决的 PromisecomponentDidMount，所以你的 this.props.searchBarSource 永远不会为空(或更准确地说，pending)。