javascript - 使用 React SSR 时如何仅发出一个 API 请求？

Question

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

由于API请求需要2秒以上，所以执行2次效率很低。是否有解决方法，只需执行 1 个请求并以某种方式使用服务器和客户端上的数据？

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();
  }
}