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

114
tobik 2014-09-23 10:58.

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 ya que 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 parte 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 en sí (cargar, agregar, administrar comentarios).

Realmente me gusta 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 síncrona 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 Fibers, que es, según 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 que 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 método 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?

6 answers

15
Esailija 2014-12-15 04:11.

Si usa react-enrutador , puede simplemente 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 el momento en que 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.

0
phtrivier 2014-10-01 10:48.

Sé que probablemente esto no sea exactamente lo que quieres, 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 ...)  

});

Lamento no tener el código exacto a mano, por lo que es posible que esto no funcione de inmediato, pero estoy publicando en interés 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.

0
svnm 2015-04-29 19:50.

Realmente me confundí con esto hoy, y aunque esto no es una respuesta a su problema, he usado 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 procesarse en el almacén de flujo en la 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 });
0
Rotem 2015-09-04 22:59.

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);
    }
);
0
zooblin 2016-03-13 12:33.

Quiero compartir con ustedes mi enfoque del uso de renderizado 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/>;
    });
    
0
jebbie 2018-09-21 06:08.

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

Related questions

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que le diagnosticaron envenenamiento por mercurio y plomo, probablemente debido a su trabajo como manipuladora de casas.

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Recientemente salió a la luz un informe policial que acusa a la estrella de 'Love Is Blind', Brennon, de violencia doméstica. Ahora, Brennon ha respondido a los reclamos.

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Conozca cómo Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia mientras organizaba la primera celebración de Acción de Gracias desde que murió su madre, Naomi Judd.

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Descubra por qué un destacado experto en lenguaje corporal cree que es fácil trazar "tales paralelismos" entre la princesa Kate Middleton y la princesa Diana.

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los inodoros arrojan columnas de aerosol invisibles con cada descarga. ¿Como sabemos? La prueba fue capturada por láseres de alta potencia.

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

¿Caduca el repelente de insectos?

¿Caduca el repelente de insectos?

¿Sigue siendo efectivo ese lote de repelente de insectos que te quedó del verano pasado? Si es así, ¿por cuánto tiempo?

Se revela la estatua de Godzilla más nueva de Tokio

Se revela la estatua de Godzilla más nueva de Tokio

Anteriormente, Kotaku informó que un hotel Godzilla se estaba abriendo en Tokio este abril. Junto al hotel, estaba programada la aparición de una enorme cabeza de 'Zilla, pero todo lo que hemos visto fueron imágenes conceptuales computarizadas.

El alcalde de Chicago realmente quiere que Elon Musk perfore un túnel debajo de la ciudad

El alcalde de Chicago realmente quiere que Elon Musk perfore un túnel debajo de la ciudad

Foto: Getty Desde que lanzó The Boring Company hace un año, Elon Musk ha mencionado varios sitios de construcción posibles para el negocio de perforación de túneles y ha descartado una vaga referencia a una aprobación gubernamental "verbal" para un túnel Hyperloop que conecta la ciudad de Nueva York y Washington. , CC. Pero ahora sabemos que al menos un alcalde quiere que Musk perfore un agujero debajo de su ciudad.

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Tapas elásticas de silicona de Tomorrow's Kitchen, paquete de 12 | $14 | Amazonas | Código promocional 20OFFKINJALids son básicamente los calcetines de la cocina; siempre perdiéndose, dejando contenedores huérfanos que nunca podrán volver a cerrarse. Pero, ¿y si sus tapas pudieran estirarse y adaptarse a todos los recipientes, ollas, sartenes e incluso frutas en rodajas grandes que sobran? Nunca más tendrás que preocuparte por perder esa tapa tan específica.

Cuéntanos tus mejores trucos de Washington, DC

Cuéntanos tus mejores trucos de Washington, DC

Hemos pirateado algunas ciudades industriales en esta columna, como Los Ángeles y Las Vegas. Ahora es el momento de una ciudad militar-industrial-compleja.

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

El equipo está a la espera de las medallas que ganó en los Juegos Olímpicos de Invierno de 2022 en Beijing, ya que se está resolviendo un caso de dopaje que involucra a la patinadora artística rusa Kamila Valieva.

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Miles de compradores de Amazon recomiendan la funda de almohada de seda Mulberry, y está a la venta en este momento. La funda de almohada de seda viene en varios colores y ayuda a mantener el cabello suave y la piel clara. Compre las fundas de almohada de seda mientras tienen hasta un 46 por ciento de descuento en Amazon

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

El jueves se presentó una denuncia de delito menor amenazante agravado contra Joe Mixon.

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

El Departamento de Policía de Lafayette comenzó a investigar a un profesor de la Universidad de Purdue en diciembre después de recibir varias denuncias de un "hombre sospechoso que se acercaba a una mujer".

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Al igual que el mundo que nos rodea, el lenguaje siempre está cambiando. Mientras que en eras anteriores los cambios en el idioma ocurrían durante años o incluso décadas, ahora pueden ocurrir en cuestión de días o incluso horas.

India me está pateando el culo

India me está pateando el culo

Estoy de vuelta por primera vez en seis años. No puedo decirte cuánto tiempo he estado esperando esto.

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

¿Merrick Garland le ha fallado a Estados Unidos?

Es más de la mitad de la presidencia de Biden. ¿Qué está esperando Merrick Garland?

¿Merrick Garland le ha fallado a Estados Unidos?

Creo, un poco tarde en la vida, en dar oportunidades a la gente. Generosamente.

Language