使用React SSR时如何只提出一个API请求？

Question

我的应用程序必须进行API调用，返回一个项目数组，这些项目可以设置样式并呈现给屏幕。为了使我的SSR渲染工作，我当然必须在服务器上发出API请求，但是当使用SSR时，你还必须在客户端上重新渲染（使用ReactDOM.hydrate）并且我在进行第二个API请求时这里。

由于API请求需要2秒以上，因此执行2次操作效率非常低。通过只做一个请求并在服务器和客户端上使用数据来解决这个问题吗？

Answer 1

This is how you fetch data on a server and reuse it on client - 直接来自redux文档。如果你没有使用redux，你需要实现非常相似的东西。

要回答后一个问题 - 如何避免在客户端发出另一个请求？您只需要检查数据是否存在：）

componentDidMount() {
  if(!this.props.isDataFetched) {
    this.props.fetchData();
  }
}

或者也许......

componentDidMount() {
  if(this.props.data.length === 0) {
    this.props.fetchData();
  }
}