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

Question

我的应用程序必须进行 API 调用，即 returns 设置样式并呈现到屏幕的项目数组。为了使我的 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();
  }
}

How to make only one API request when using React SSR?