用后端请求反应服务器端渲染答案

【问题标题】：React server side rendering with backend requests用后端请求反应服务器端渲染
【发布时间】：2017-01-30 12:43:22
【问题描述】：

我有一个通过 Express 进行服务器端渲染的 React 应用程序。我有简单的 App 组件：

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: []
    };

    fetch('http://backend', {
      mode: 'cors',
    })  
      .then(res => res.json())
      .then(data => this.state.data); 
  }

  render() {
    return (
      <ul> 
        {this.state.data.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    );
  }
};

问题（或更可能的功能）是 fetch 异步工作。因此，浏览器获取包含空数据的页面。

有没有办法从加载数据的服务器页面获取？假设我想从服务器页面获取已加载的帖子或其他内容。

或者我有什么问题吗？

【问题讨论】：

标签： node.js reactjs express fetch

【解决方案1】：

您没有正确设置state。使用setState() 设置新状态，因为不使用setState() 方法无法更新状态：https://facebook.github.io/react/docs/react-component.html#setstate

fetch('http://backend', {
  mode: 'cors',
})  
.then(res => res.json())
.then(data => this.setState({data: data}));

另外，您添加的代码不是使用 React 进行的服务器端渲染。你使用ReactDOMServer.renderToString()方法做服务端渲染：https://facebook.github.io/react/docs/react-dom-server.html#rendertostring

【讨论】：

SSR 在幕后。 this.setState 也不起作用。我也尝试通过this.setState 设置状态来移动componentWillMount 方法中的fetch，但问题相同。

【解决方案2】：

是的，即使您修复了 setState() 问题，您仍然会在获取之前渲染组件。问题确实是 fetch 是异步的。

为了能够在服务器端渲染后端调用，您需要等到所有后端调用都完成后，设置所有组件的道具和状态，然后再渲染它们。

如果您使用的是 Redux，两个库可以帮助您确定何时完成操作，即 Redial (https://github.com/markdalgleish/redial) 和 redux-promise-counter (https://github.com/bitgenics/redux-promise-counter)。更多内容如下。

您要解决的下一个问题是将数据发送到客户端并从中初始化您的组件，因此您不必再次重做（所有）客户端上的请求。

您可以手动完成所有这些操作，但如果您对 SSR 很认真，您可能应该选择 Redux 之类的东西。一种将所有应用程序状态存储在一个商店中的方法。更轻松地存储结果、将其发送到客户端并从 JSON 初始化您的存储。

【讨论】：