Стратегии серверного рендеринга асинхронно инициализированных компонентов React.js

Предполагается, что одним из самых больших преимуществ React.js является рендеринг на стороне сервера . Проблема в том, что ключевая функция React.renderComponentToString()является синхронной, что делает невозможным загрузку каких-либо асинхронных данных, поскольку иерархия компонентов отображается на сервере.

Допустим, у меня есть универсальный компонент для комментирования, который я могу разместить где угодно на странице. У него есть только одно свойство, какой-то идентификатор (например, id статьи, под которой размещаются комментарии), а все остальное обрабатывается самим компонентом (загрузка, добавление, управление комментариями).

Мне очень нравится архитектура Flux, потому что она значительно упрощает многие вещи, а ее хранилища идеально подходят для обмена состоянием между сервером и клиентом. Как только мой магазин, содержащий комментарии, инициализирован, я могу просто сериализовать его и отправить с сервера клиенту, где его легко восстановить.

Вопрос в том, как лучше всего заполнить мой магазин. В последние дни я много гуглил и наткнулся на несколько стратегий, ни одна из которых не казалась действительно хорошей, учитывая, насколько активно эта функция React «продвигается».

1. На мой взгляд, самый простой способ - заполнить все мои магазины до начала фактического рендеринга. Это означает, что где-то вне иерархии компонентов (например, подключен к моему маршрутизатору). Проблема с этим подходом в том, что мне пришлось бы дважды определять структуру страницы. Рассмотрим более сложную страницу, например страницу блога с множеством различных компонентов (фактическое сообщение в блоге, комментарии, связанные сообщения, новейшие сообщения, поток Twitter ...). Мне пришлось бы спроектировать структуру страницы с использованием компонентов React, а затем где-то еще мне нужно было бы определить процесс заполнения каждого необходимого хранилища для этой текущей страницы. Мне это не кажется хорошим решением. К сожалению, большинство изоморфных туториалов разработано именно таким образом (например, этот отличный флюкс-туториал ).

2. React-async, . Такой подход идеален. Это позволяет мне просто определить в специальной функции в каждом компоненте, как инициализировать состояние (независимо от того, синхронно или асинхронно), и эти функции вызываются по мере того, как иерархия отображается в HTML. Он работает таким образом, что компонент не отображается до тех пор, пока состояние не будет полностью инициализировано. Проблема в том, что для этого требуются волокна который, насколько я понимаю, является расширением Node.js, изменяющим стандартное поведение JavaScript. Хотя результат мне очень нравится, мне все же кажется, что вместо того, чтобы найти решение, мы изменили правила игры. И я думаю, что нас не следует заставлять делать это, чтобы использовать эту основную функцию React.js. Я также не уверен в общей поддержке этого решения. Можно ли использовать Fiber на стандартном хостинге Node.js?

3. Я немного подумал сам. Я особо не продумывал детали реализации, но общая идея заключается в том, что я бы расширил компоненты аналогично React-async, а затем я бы неоднократно вызывал React.renderComponentToString () для корневого компонента. Во время каждого прохода я собирал расширяющиеся обратные вызовы, а затем вызывал их в и на проходе для заполнения магазинов. Я бы повторил этот шаг до тех пор, пока все хранилища, необходимые для текущей иерархии компонентов, не будут заполнены. Есть много вещей, которые нужно решить, и я особенно не уверен в производительности.

Я что-то пропустил? Есть другой подход / решение? Прямо сейчас я думаю о том, чтобы пойти по пути реакции-асинхронности / волокон, но я не совсем уверен в этом, как описано во втором пункте.

Связанное обсуждение на GitHub . Судя по всему, официального подхода или даже решения нет. Возможно, реальный вопрос заключается в том, как будут использоваться компоненты React. Как простой слой представления (в значительной степени мое предложение номер один) или как настоящие независимые и автономные компоненты?

Если вы используете response-router , вы можете просто определить willTransitionToметоды в компонентах, которым передается Transitionобъект, который вы можете вызвать .wait.

Не имеет значения, является ли renderToString синхронным, потому что обратный вызов Router.runне будет вызываться до тех пор, пока все .waited обещания не будут разрешены, поэтому к моменту вызова 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, поскольку мне не требовалась поддержка потоковой передачи в node.

Поэтому я только что принял решение, что для начальных данных, которые необходимо отобразить в хранилище потоков при загрузке, я выполню запрос 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));

Затем я инициализирую метод рендеринга, который передает данные в магазин.

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:

    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 автоматически найдет все задействованные запросы в вашем приложении и выполнит их, поместив ваш кеш apollo на сервер и, таким образом, включив полностью рабочий SSR.