通过服务器端渲染获取数据的正确方法（Next.js，何时使用componentDidMount以及何时使用componentWillMount）

Question

我正在使用Next.js，在_app.js页面（我们在其中设置了一般的webapp状态）中，我需要在标题中包含2种类型的数据（因此对于每个组件）。

1）第一种是标题信息，应在加载应用程序之前呈现此信息。我将使用get getInitialProps调用端点并将其放入道具，然后使用componentWillMount将其添加到状态。

2）第二种类型是Search组件的数据，它是大量数据，我不特别介意在应用已经渲染时加载它，因为它不会在第一个用户视觉中显示。 因此，我猜测在这里，与其添加设置状态，不如使用componentDidMount并异步调用获取Serach对象数据的端点更好。

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

1）评论-我是在正确地考虑这个问题还是错过了什么？

2）问题-现在，第一次渲染后加载数据时，我将像这样传递数据：_app.js->布局->菜单-> SearchBar 所以我的问题是，在我的searchBar中，我需要做类似的事情

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

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

Answer 1

您想做的事情很有意义。来到NextJS，您需要非常仔细地考虑哪些数据应该加载到服务器端，哪些不应该加载。

以下是一些指针：

1. 无需在搜索组件中setState，您可以 使用this.props.searchBarSource和Kunukn一样。

   [注意-如果您将getInitialProps与客户端（浅层路由）结合在一起，则当用户导航到新的客户端路由时，initialProps将是未定义的。一种解决方法可能是将initialProps存储在state或本地存储中。]

2. getInitialProps的要点是在 组件安装。您将始终在上收到已解决的Promise componentDidMount，因此您的this.props.searchBarSource将永远不会 为空（或更正确地说，为pending）。