Estrategias para la representación del lado del servidor de componentes React.js inicializados asincrónicamente

Se supone que una de las mayores ventajas de React.js es la renderización del lado del servidor . El problema es que la función clave React.renderComponentToString()es síncrona, lo que hace que sea imposible cargar datos asincrónicos cuando la jerarquía de componentes se representa en el servidor.

Digamos que tengo un componente universal para comentar que puedo colocar prácticamente en cualquier lugar de la página. Tiene solo una propiedad, algún tipo de identificador (por ejemplo, la identificación de un artículo debajo del cual se colocan los comentarios), y todo lo demás lo maneja el componente mismo (cargar, agregar, administrar comentarios).

Me gusta mucho la arquitectura Flux porque hace muchas cosas mucho más fáciles y sus tiendas son perfectas para compartir el estado entre el servidor y el cliente. Una vez que se inicializa mi tienda que contiene comentarios, puedo serializarla y enviarla del servidor al cliente, donde se puede restaurar fácilmente.

La pregunta es cuál es la mejor manera de poblar mi tienda. Durante los últimos días he estado buscando mucho en Google y me he encontrado con pocas estrategias, ninguna de las cuales me pareció realmente buena considerando cuánto se está "promocionando" esta característica de React.

1. En mi opinión, la forma más sencilla es llenar todas mis tiendas antes de que comience la renderización real. Eso significa en algún lugar fuera de la jerarquía de componentes (conectado a mi enrutador, por ejemplo). El problema con este enfoque es que tendría que definir prácticamente dos veces la estructura de la página. Considere una página más compleja, por ejemplo, una página de blog con muchos componentes diferentes (publicación de blog real, comentarios, publicaciones relacionadas, publicaciones más recientes, flujo de Twitter ...). Tendría que diseñar la estructura de la página usando componentes de React y luego en otro lugar tendría que definir el proceso de poblar cada tienda requerida para esta página actual. Eso no me parece una buena solución. Desafortunadamente, la mayoría de los tutoriales isomórficos están diseñados de esta manera (por ejemplo, este gran tutorial de flujo ).

2. React-async . Este enfoque es perfecto. Me permite simplemente definir en una función especial en cada componente cómo inicializar el estado (no importa si de forma sincrónica o asincrónica) y estas funciones se llaman cuando la jerarquía se representa en HTML. Funciona de tal manera que un componente no se procesa hasta que el estado se inicializa por completo. El problema es que requiere Fibrasque es, hasta donde tengo entendido, una extensión de Node.js que altera el comportamiento estándar de JavaScript. Aunque me gusta mucho el resultado, me sigue pareciendo que en lugar de encontrar una solución cambiamos las reglas del juego. Y creo que no deberíamos vernos obligados a hacer eso para usar esta característica principal de React.js. Tampoco estoy seguro del soporte general de esta solución. ¿Es posible utilizar Fiber en el alojamiento web estándar de Node.js?

3. Estaba pensando un poco por mi cuenta. Realmente no he pensado en los detalles de implementación, pero la idea general es que ampliaría los componentes de manera similar a React-async y luego llamaría repetidamente a React.renderComponentToString () en el componente raíz. Durante cada pase, recopilaba las devoluciones de llamada extendidas y luego las llamaba al y del pase para llenar las tiendas. Repetiría este paso hasta que se llenen todas las tiendas requeridas por la jerarquía de componentes actual. Hay muchas cosas por resolver y estoy particularmente inseguro sobre el rendimiento.

¿Me he perdido algo? ¿Existe otro enfoque / solución? En este momento estoy pensando en ir por el camino react-async / fiber, pero no estoy completamente seguro como se explica en el segundo punto.

Discusión relacionada en GitHub . Aparentemente, no existe un enfoque oficial ni siquiera una solución. Quizás la verdadera pregunta es cómo se pretende que se utilicen los componentes de React. ¿Como una capa de vista simple (más o menos mi sugerencia número uno) o como componentes reales independientes e independientes?

Si utiliza react-enrutador , simplemente puede definir un willTransitionTométodo en los componentes, que obtiene un Transitionobjeto al que puede llamar .wait.

No importa si renderToString es síncrono porque la devolución de llamada a Router.runno se llamará hasta que .waitse resuelvan todas las promesas de ed, por lo que para cuando renderToStringse llame en el middleware, podría haber llenado las tiendas. Incluso si las tiendas son singleton, puede configurar sus datos temporalmente justo a tiempo antes de la llamada de renderizado síncrono y el componente lo verá.

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

El routesobjeto (que describe la jerarquía de rutas) se comparte literalmente con el cliente y el servidor.

Sé que probablemente esto no sea exactamente lo que desea, y puede que no tenga sentido, pero recuerdo haberme arreglado modificando ligeramente el componente para manejar ambos:

• renderizado en el lado del servidor, con todo el estado inicial ya recuperado, de forma asincrónica si es necesario)
• renderizado en el lado del cliente, con ajax si es necesario

Entonces algo como:

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

});

Lo siento, no tengo el código exacto a mano, por lo que es posible que esto no funcione, pero lo estoy publicando en aras de la discusión.

Una vez más, la idea es tratar a la mayor parte del componente como una vista mudo, y hacer frente a traer los datos tanto como sea posible fuera del componente.

Realmente me he metido con esto hoy, y aunque esto no es una respuesta a su problema, he utilizado este enfoque. Quería usar Express para enrutamiento en lugar de React Router, y no quería usar Fibers ya que no necesitaba soporte de subprocesos en node.

Así que acabo de tomar la decisión de que, para los datos iniciales que deben presentarse en el almacén de flujo en carga, realizaré una solicitud AJAX y pasaré los datos iniciales al almacén.

Estaba usando Fluxxor para este ejemplo.

Entonces, en mi ruta rápida, en este caso una /productsruta:

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

Luego, mi método de procesamiento de inicialización que pasa los datos a la tienda.

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

Sé que esta pregunta se hizo hace un año, pero tuvimos el mismo problema y lo resolvemos con promesas anidadas que se derivaron de los componentes que se van a renderizar. Al final, teníamos todos los datos de la aplicación y simplemente los enviamos.

Por ejemplo:

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

    }

});

y en el enrutador

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

Quiero compartir con ustedes mi enfoque del uso de renderización del lado del servidor Flux, por ejemplo:

1. Digamos que tenemos componentcon los datos iniciales de la tienda:

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

2. Si la clase requiere algunos datos precargados para el estado inicial, creemos Loader para MyComponent:

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

3. Tienda:

   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. Ahora solo cargue los datos en el enrutador:

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

solo como un resumen breve -> GraphQL resolverá esto completamente para su pila ...

• agregar GraphQL
• usa apollo y react-apollo
• use "getDataFromTree" antes de comenzar a renderizar

-> getDataFromTree encontrará automáticamente todas las consultas involucradas en su aplicación y las ejecutará, colocando su caché apollo en el servidor y, por lo tanto, habilitando SSR en pleno funcionamiento .. BÄM