首页 文章

如何在服务器上呈现异步初始化的组件

提问于
浏览 次
19

我对ReactJS比较陌生，并且很容易被实现服务器端渲染以减少“第一次推文的时间” . 我正在运行一个Node-Express-React堆栈，它使用React的renderComponentToString在服务器上预渲染标记 .

当组件可以同步呈现时，它工作正常，但是当涉及到实现ajax填充的组件时，我正在努力（但是这适用于组件初始化期间的任何异步操作，例如websocket） .

以React网站为例：http://facebook.github.io/react/tips/initial-ajax.html

componentDidMount: function() {
 $.get(this.props.source, function(result) {
  var lastGist = result[0];
  this.setState({
    username: lastGist.user.login,
    lastGistUrl: lastGist.html_url
  });
}.bind(this));

它不能在服务器上运行，因为在使用renderComponentToString时从不触发componentDidMount . 通过在客户端和服务器上使用相同的HTTP请求包装器（而不是使用jQuery的$ .get），并在实例化组件并将其作为prop传递之前预先获取数据，可以解决这个简单的情况 .

但是，在实际的，复杂的应用程序中，异步依赖可能变得非常复杂，并且预取并不真正适合构建React结构的后代方法 . 如何在React中实现异步初始化模式，可以在服务器上呈现而不实际安装任何东西（即没有DOM模拟和PhantomJS，这是使用renderComponentToString的全部意义）？

javascript reactjs

3 回答

  • 0

    我认为最实用的方法是为预加载的数据制作一个可选的prop，如下所示：

    getInitialState: function() {
    if (this.props.initialLastGist) {
        var lastGist = this.props.initialLastGist;
        return {
            username: lastGist.user.login,
            lastGistUrl: lastGist.html_url
        };
    } else {
        return {};
    }
},

componentDidMount: function() {
    if (!this.props.initialLastGist) {
        $.get(this.props.source, function(result) {
            var lastGist = result[0];
            this.setState({
                username: lastGist.user.login,
                lastGistUrl: lastGist.html_url
            });
        }.bind(this));
    }
},

    使用这样的设置，如果存在预加载的数据，则可以立即渲染组件;否则AJAX请求将在安装时发送 .

    目前，服务器呈现始终是同步的，并且现在在这里有一个更好的解决方案，但一般来说，您希望最大限度地减少对服务器的HTTP请求数量，因此值得考虑您的体系结构，以便您可以收集所有数据你需要在服务器上 .

    回复于
  • 4

    您可以查看react-quickstart项目，该项目使用 react-async 并附带服务器呈现示例 . react-async 提供了一个装饰的 renderComponentToString 方法，该方法预取异步状态并将其呈现为初始标记 . 但是，您需要从'regular' state分别指定异步状态 .

    回复于
  • 3

    您可以查看react-nexus（https://github.com/elierotenberg/react-nexus），它可以帮助您提前声明所有异步依赖项 .

    但我意识到react-nexus是你自己的答案，所以你可能已经找到了它！

    回复于

相关问题