同构 React.js & iso-http

Question

我正在构建一个反应 web 应用程序，我想呈现服务器端和客户端。我一直在努力 isomorphic-react-template but I've used iso-http 查询我的内容服务器。我的目标是让应用程序在服务器端直接查询内容服务器并将内容呈现给 HTML；并在客户端执行正常的 AJAX 内容请求时让应用程序运行。

这是我正在使用的代码。它在浏览器上运行良好，但服务器端渲染不包含数据；我想是因为服务器端渲染在编译 HTML 并将其发送给

之前没有等待对 return 的异步 http 调用：

componentDidMount: function() {
  var id = this.getParams().id;
  var classThis = this;

  request
  .get("http://content.example.com/things/" + id)
  .end(function(response) {
    response.body = JSON.parse(response.text);
    if (response.ok) {
      classThis.setState({ data: response.body });
    } else {
      classThis.setState({ data: null });
    }
  });
}

我知道这都是相当新的东西；但是是否有解决此问题的已知方法，以便服务器端渲染器在发送之前等待某些异步调用完成？

Answer 1

我已经设法让这个与 react-async 一起工作。

我已经像这样提取了我的异步函数，所以我可以从 componentDidMount 和异步 getInitialStateAsync 函数中调用它 ReactAsync 使用：

mixins: [ ReactAsync.Mixin ],

getInitialStateAsync: function(callback) {
  this.getContent(function(state) {
    callback(null, state)
  }.bind(this))
},

componentDidMount: function() {
  this.getContent(function(state) {
    this.setState(state);
  }.bind(this));
},

getContent: function(callback) {
  var id = this.getParams().id;
  request
    .get("http://content.example.com/things/" + id)
    .end(function(response) {
      response.body = JSON.parse(response.text);
      if (response.ok) {
        callback({ error: {}, post: response.body })
      } else {
        callback({ post: {}, error: response.body });
      }
    });
}

然后在我的 server.jsx 中使用异步函数进行渲染：

ReactAsync.renderToStringAsync(<Handler />, function(err, markup) {
  var html   = React.renderToStaticMarkup(<Html title={title} markup={markup} />);
  res.send('<!DOCTYPE html>' + html);
});

显然这里有巨大的潜在问题（如果服务器不存在，整个页面将无法呈现）但这感觉像是正确方法的开始！

同构 React.js & iso-http

Isomorphic React.js & iso-http

javascript

reactjs