服务器端渲染异步初始化的React.js组件的策略

React.js的最大优势之一应该是服务器端渲染。问题在于密钥功能React.renderComponentToString()是同步的，这使得在服务器上呈现组件层次结构时无法加载任何异步数据。

假设我有一个通用的注释组件，可以将其放置在页面上的任意位置。它只有一个属性，某种标识符（例如，放置评论的文章ID），其他所有内容都由组件本身处理（加载，添加，管理评论）。

我真的很喜欢 Flux架构，因为它使许多事情变得容易得多，并且它的存储非常适合在服务器和客户端之间共享状态。初始化包含评论的商店后，我可以对其进行序列化并将其从服务器发送到易于还原的客户端。

问题是填充我的商店的最佳方法是什么。在过去的几天里，我一直在搜寻很多东西，并且遇到过几种策略，考虑到React的这一功能正在“推广”多少，这些策略似乎都不是一件好事。

1. 我认为，最简单的方法是在实际渲染开始之前填充所有商店。这意味着组件层次结构之外的某个地方（例如，钩到了我的路由器）。这种方法的问题在于，我几乎必须两次定义页面结构。考虑一个更复杂的页面，例如具有许多不同组件的博客页面（实际博客文章，评论，相关文章，最新文章，Twitter流...）。我将不得不使用React组件设计页面结构，然后我必须在其他地方定义填充此当前页面的每个所需商店的过程。这对我来说似乎不是一个很好的解决方案。不幸的是，大多数同构教程都是以此方式设计的（例如， flow-tutorial）。

2. 反应-异步。这种方法是完美的。它使我可以简单地在每个组件的特殊功能中定义如何初始化状态（无论是同步还是异步），这些功能在将层次结构呈现给HTML时被调用。它的工作方式是直到状态完全初始化后才呈现组件。问题是它需要纤维据我了解，这是一个Node.js扩展，可更改标准JavaScript行为。尽管我非常喜欢结果，但在我看来，我们没有找到解决方案，而是更改了游戏规则。而且我认为我们不应被迫使用React.js的这一核心功能。我也不确定该解决方案的一般支持。是否可以在标准Node.js虚拟主机上使用Fiber？

3. 我自己想了一下。我还没有真正考虑过实现细节，但是总体思路是，我将以类似于React-async的方式扩展组件，然后在根组件上重复调用React.renderComponentToString（）。在每次通过期间，我将收集扩展的回调，然后在和处调用它们，以填充商店。我将重复此步骤，直到将填充当前组件层次结构所需的所有商店。有很多事情需要解决，我尤其不确定性能。

我错过了什么？还有其他方法/解决方案吗？现在，我正在考虑采用react-async / fibers方式，但是我不确定，正如第二点所述。

GitHub上的相关讨论。显然，没有官方的方法甚至解决方案。可能真正的问题是应如何使用React组件。像简单的视图层（几乎是我的建议之一）还是真正的独立组件？

如果使用react-router，则只能willTransitionTo在组件中定义一个方法，该方法将传递一个Transition可以调用的对象.wait。

renderToString是否同步并不重要，因为在解决Router.run所有.waited promise 之前不会调用to的回调，因此renderToString在中间件中调用该时间之前，您可能已经填充了商店。即使商店是单身人士，您也可以在同步渲染调用之前即时设置临时数据，组件将看到它们。

中间件示例：

var Router = require('react-router');
var React = require("react");
var url = require("fast-url-parser");

module.exports = function(routes) {
    return function(req, res, next) {
        var path = url.parse(req.url).pathname;
        if (/^\/?api/i.test(path)) {
            return next();
        }
        Router.run(routes, path, function(Handler, state) {
            var markup = React.renderToString(<Handler routerState={state} />);
            var locals = {markup: markup};
            res.render("layouts/main", locals);
        });
    };
};

的routes对象（其描述了路由层次）与客户端和服务器共享的逐字

我知道这可能不完全是您想要的，并且可能没有意义，但是我记得轻描淡写地修改组件以同时处理这两个问题：

• 在服务器端进行渲染，并已检索到所有初始状态，如果需要，可以异步进行）
• 在客户端渲染，必要时使用ajax

所以像：

/** @jsx React.DOM */

var UserGist = React.createClass({
  getInitialState: function() {

    if (this.props.serverSide) {
       return this.props.initialState;
    } else {
      return {
        username: '',
        lastGistUrl: ''
      };
    }

  },

  componentDidMount: function() {
    if (!this.props.serverSide) {

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

    }

  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

// On the client side
React.renderComponent(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);

// On the server side
getTheInitialState().then(function (initialState) {

    var renderingOptions = {
        initialState : initialState;
        serverSide : true;
    };
    var str = Xxx.renderComponentAsString( ... renderingOptions ...)  

});

抱歉，我手头没有确切的代码，因此可能无法立即使用，但出于讨论的目的而发布。

再次，该想法是将大多数组件视为愚蠢的视图，并尽可能地从组件中获取数据。

今天我真的很困惑，尽管这不能解决您的问题，但我还是使用了这种方法。我想使用Express而不是React Router进行路由，也不想使用Fibers，因为我不需要节点中的线程支持。

因此，我刚刚做出决定，对于需要在加载时呈现给焊剂存储的初始数据，我将执行AJAX请求并将初始数据传递到存储中

在此示例中，我使用的是Fluxxor。

因此，在我的快速路线上，在这种情况下为/products路线：

var request = require('superagent');
var url = 'http://myendpoint/api/product?category=FI';

request
  .get(url)
  .end(function(err, response){
    if (response.ok) {    
      render(res, response.body);        
    } else {
      render(res, 'error getting initial product data');
    }
 }.bind(this));

然后是我的initialize渲染方法，该方法将数据传递到商店。

var render = function (res, products) {
  var stores = { 
    productStore: new productStore({category: category, products: products }),
    categoryStore: new categoryStore()
  };

  var actions = { 
    productActions: productActions,
    categoryActions: categoryActions
  };

  var flux = new Fluxxor.Flux(stores, actions);

  var App = React.createClass({
    render: function() {
      return (
          <Product flux={flux} />
      );
    }
  });

  var ProductApp = React.createFactory(App);
  var html = React.renderToString(ProductApp());
  // using ejs for templating here, could use something else
  res.render('product-view.ejs', { app: html });

我知道这个问题是一年前提出的，但是我们遇到了同样的问题，我们使用嵌套承诺来解决它，该承诺是从将要渲染的组件派生而来的。最终，我们获得了该应用程序的所有数据，然后将其发送出去。

例如：

var App = React.createClass({

    /**
     *
     */
    statics: {
        /**
         *
         * @returns {*}
         */
        getData: function (t, user) {

            return Q.all([

                Feed.getData(t),

                Header.getData(user),

                Footer.getData()

            ]).spread(
                /**
                 *
                 * @param feedData
                 * @param headerData
                 * @param footerData
                 */
                function (feedData, headerData, footerData) {

                    return {
                        header: headerData,
                        feed: feedData,
                        footer: footerData
                    }

                });

        }
    },

    /**
     *
     * @returns {XML}
     */
    render: function () {

        return (
            <label>
                <Header data={this.props.header} />
                <Feed data={this.props.feed}/>
                <Footer data={this.props.footer} />
            </label>
        );

    }

});

并在路由器中

var AppFactory = React.createFactory(App);

App.getData(t, user).then(
    /**
     *
     * @param data
     */
    function (data) {

        var app = React.renderToString(
            AppFactory(data)
        );       

        res.render(
            'layout',
            {
                body: app,
                someData: JSON.stringify(data)                
            }
        );

    }
).fail(
    /**
     *
     * @param error
     */
    function (error) {
        next(error);
    }
);

想与您分享我使用的服务器端渲染方法Flux，例如，可以简化一下：

1. 假设我们拥有component来自商店的初始数据：

   class MyComponent extends Component {
     constructor(props) {
       super(props);
       this.state = {
         data: myStore.getData()
       };
     }
   }

2. 如果类需要一些预加载的数据来初始状态，我们可以为MyComponent以下对象创建Loader ：

    class MyComponentLoader {
       constructor() {
           myStore.addChangeListener(this.onFetch);
       }
       load() {
           return new Promise((resolve, reject) => {
               this.resolve = resolve;
               myActions.getInitialData(); 
           });
       }
       onFetch = () => this.resolve(data);
   }

3. 商店：

   class MyStore extends StoreBase {
       constructor() {
           switch(action => {
               case 'GET_INITIAL_DATA':
               this.yourFetchFunction()
                   .then(response => {
                       this.data = response;
                       this.emitChange();
                    });
                break;
       }
       getData = () => this.data;
   }

4. 现在只需将数据加载到路由器中：

   on('/my-route', async () => {
       await new MyComponentLoader().load();
       return <MyComponent/>;
   });

就像一个简短的汇总-> GraphQL将为您的堆栈彻底解决这个问题...

• 添加GraphQL
• 使用apollo和react-apollo
• 开始渲染之前使用“ getDataFromTree”

-> getDataFromTree将自动在您的应用程序中找到所有涉及的查询并执行它们，从而将您的阿波罗缓存在服务器上合并，从而启用完全正常的SSR。