Stratégies pour le rendu côté serveur des composants React.js initialisés de manière asynchrone

L'un des plus grands avantages de React.js est censé être le rendu côté serveur . Le problème est que la fonction clé React.renderComponentToString()est synchrone, ce qui rend impossible le chargement de données asynchrones lorsque la hiérarchie des composants est rendue sur le serveur.

Disons que j'ai un composant universel pour les commentaires que je peux déposer à peu près n'importe où sur la page. Il n'a qu'une seule propriété, une sorte d'identifiant (par exemple l'id d'un article sous lequel les commentaires sont placés), et tout le reste est géré par le composant lui-même (chargement, ajout, gestion des commentaires).

J'aime beaucoup l' architecture Flux car elle facilite beaucoup de choses et ses magasins sont parfaits pour partager l'état entre le serveur et le client. Une fois que mon magasin contenant des commentaires est initialisé, je peux simplement le sérialiser et l'envoyer du serveur au client où il est facilement restauré.

La question est de savoir quelle est la meilleure façon de peupler mon magasin. Au cours des derniers jours, j'ai beaucoup cherché sur Google et je suis tombé sur quelques stratégies, dont aucune ne me paraissait vraiment bonne compte tenu de la "promotion" de cette fonctionnalité de React.

1. À mon avis, le moyen le plus simple est de peupler tous mes magasins avant le début du rendu réel. Cela signifie quelque part en dehors de la hiérarchie des composants (accroché à mon routeur par exemple). Le problème avec cette approche est que je devrais définir à peu près deux fois la structure de la page. Prenons une page plus complexe, par exemple une page de blog avec de nombreux composants différents (article de blog réel, commentaires, articles associés, articles les plus récents, flux Twitter ...). Je devrais concevoir la structure de la page à l'aide des composants React, puis ailleurs, je devrais définir le processus de remplissage de chaque magasin requis pour cette page actuelle. Cela ne me semble pas être une bonne solution. Malheureusement, la plupart des didacticiels isomorphes sont conçus de cette façon (par exemple ce grand didacticiel sur les flux ).

2. Réagissez-async . Cette approche est parfaite. Cela me permet simplement de définir dans une fonction spéciale dans chaque composant comment initialiser l'état (peu importe que ce soit de manière synchrone ou asynchrone) et ces fonctions sont appelées lorsque la hiérarchie est rendue en HTML. Cela fonctionne de telle sorte qu'un composant n'est pas rendu tant que l'état n'est pas complètement initialisé. Le problème est qu'il nécessite des fibresqui est, pour autant que je sache, une extension Node.js qui modifie le comportement JavaScript standard. Bien que j'aime beaucoup le résultat, il me semble toujours qu'au lieu de trouver une solution, nous avons changé les règles du jeu. Et je pense que nous ne devrions pas être obligés de faire cela pour utiliser cette fonctionnalité de base de React.js. Je ne suis pas non plus sûr du support général de cette solution. Est-il possible d'utiliser la fibre sur l'hébergement Web standard Node.js?

3. Je réfléchissais un peu par moi-même. Je n'ai pas vraiment réfléchi aux détails de l'implémentation, mais l'idée générale est que j'étendrais les composants de la même manière que React-async, puis j'appellerais à plusieurs reprises React.renderComponentToString () sur le composant racine. Au cours de chaque passage, je collectais les rappels étendus, puis je les appelais au et du passage pour peupler les magasins. Je répéterais cette étape jusqu'à ce que tous les magasins requis par la hiérarchie actuelle des composants soient remplis. Il y a beaucoup de choses à résoudre et je ne suis particulièrement pas sûr de la performance.

Ai-je oublié quelque chose? Existe-t-il une autre approche / solution? En ce moment, je pense aller dans le sens de la réaction asynchrone / fibres mais je n'en suis pas complètement sûr, comme expliqué dans le deuxième point.

Discussion connexe sur GitHub . Apparemment, il n'y a pas d'approche officielle ni même de solution. Peut-être que la vraie question est de savoir comment les composants React sont destinés à être utilisés. Comme une simple couche de vue (à peu près ma suggestion numéro un) ou comme de vrais composants indépendants et autonomes?

Si vous utilisez react-router , vous pouvez simplement définir une willTransitionTométhode dans les composants, qui reçoit un Transitionobjet que vous pouvez appeler .wait.

Peu importe si renderToString est synchrone, car le rappel vers Router.runne sera pas appelé tant que toutes les .waitpromesses ed ne seront pas résolues, donc au moment où il renderToStringsera appelé dans le middleware, vous auriez pu remplir les magasins. Même si les magasins sont des singletons, vous pouvez simplement définir leurs données temporairement juste à temps avant l'appel de rendu synchrone et le composant le verra.

Exemple de middleware:

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);
        });
    };
};

L' routesobjet (qui décrit la hiérarchie des routes) est partagé textuellement avec le client et le serveur

Je sais que ce n'est probablement pas exactement ce que vous voulez, et cela n'a peut-être pas de sens, mais je me souviens de m'être débrouillé en modifiant légèrement le composant pour gérer les deux:

• rendu côté serveur, avec tout l'état initial déjà récupéré, de manière asynchrone si nécessaire)
• rendu côté client, avec ajax si besoin

Donc quelque chose comme:

/** @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 ...)  

});

Je suis désolé de ne pas avoir le code exact sous la main, donc cela pourrait ne pas fonctionner immédiatement, mais je publie dans l'intérêt de la discussion.

Encore une fois, l'idée est de traiter la plupart des composants comme une vue stupide, et de traiter l' extraction de données, autant que possible hors du composant.

J'ai été vraiment dérangé avec cela aujourd'hui, et bien que ce ne soit pas une réponse à votre problème, j'ai utilisé cette approche. Je voulais utiliser Express pour le routage plutôt que React Router, et je ne voulais pas utiliser Fibers car je n'avais pas besoin de support de threading dans le nœud.

Je viens donc de décider que pour les données initiales qui doivent être rendues au magasin de flux lors du chargement, je vais effectuer une requête AJAX et transmettre les données initiales au magasin

J'utilisais Fluxxor pour cet exemple.

Donc sur mon itinéraire express, dans ce cas un /productsitinéraire:

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));

Ensuite, ma méthode de rendu initialize qui transmet les données au magasin.

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 });

Je sais que cette question a été posée il y a un an mais nous avons eu le même problème et nous le résolvons avec des promesses imbriquées dérivées des composants qui vont être rendus. En fin de compte, nous avons eu toutes les données de l'application et nous l'avons simplement envoyée.

Par exemple:

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>
        );

    }

});

et dans le routeur

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);
    }
);

Je veux partager avec vous mon approche du rendu côté serveur en utilisant Flux, peu être simplifié par exemple:

1. Disons que nous avons componentavec les données initiales du magasin:

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

2. Si la classe nécessite des données préchargées pour l'état initial, créons Loader pour MyComponent:

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

3. Boutique:

   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. Maintenant, chargez simplement les données dans le routeur:

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

tout comme un bref rollup -> GraphQL résoudra cela entièrement pour votre pile ...

• ajouter GraphQL
• utiliser apollo et react-apollo
• utilisez "getDataFromTree" avant de commencer le rendu

-> getDataFromTree trouvera automatiquement toutes les requêtes impliquées dans votre application et les exécutera, plaçant votre cache apollo sur le serveur et activant ainsi le SSR pleinement opérationnel. BÄM