Strategi untuk rendering sisi server dari komponen React.js yang diinisialisasi secara asinkron

Salah satu keuntungan terbesar dari React.js adalah rendering sisi server . Masalahnya adalah bahwa fungsi kuncinya React.renderComponentToString()sinkron sehingga tidak mungkin memuat data asinkron apa pun saat hierarki komponen dirender di server.

Katakanlah saya memiliki komponen universal untuk berkomentar yang dapat saya jatuhkan di mana saja di halaman. Ini hanya memiliki satu properti, beberapa jenis pengenal (misalnya id artikel di bawah ini tempat komentar ditempatkan), dan yang lainnya ditangani oleh komponen itu sendiri (memuat, menambah, mengelola komentar).

Saya sangat menyukai arsitektur Flux karena ia membuat banyak hal menjadi lebih mudah, dan tokonya sempurna untuk berbagi status antara server dan klien. Setelah toko saya yang berisi komentar diinisialisasi, saya hanya dapat membuat serial dan mengirimkannya dari server ke klien di mana ia dapat dengan mudah dipulihkan.

Pertanyaannya adalah bagaimana cara terbaik untuk mengisi toko saya. Selama beberapa hari terakhir ini saya telah banyak mencari di Google dan menemukan beberapa strategi, tidak ada satupun yang terlihat sangat bagus mengingat seberapa besar fitur React ini "dipromosikan".

1. Menurut pendapat saya, cara paling sederhana adalah mengisi semua toko saya sebelum rendering sebenarnya dimulai. Itu berarti di suatu tempat di luar hierarki komponen (terhubung ke router saya misalnya). Masalah dengan pendekatan ini adalah saya harus cukup banyak mendefinisikan struktur halaman dua kali. Pertimbangkan halaman yang lebih kompleks, misalnya halaman blog dengan banyak komponen berbeda (posting blog aktual, komentar, posting terkait, posting terbaru, aliran twitter ...). Saya harus mendesain struktur halaman menggunakan komponen React dan kemudian di tempat lain saya harus menentukan proses pengisian setiap toko yang diperlukan untuk halaman ini. Bagi saya, itu bukan solusi yang bagus. Sayangnya sebagian besar tutorial isomorfik dirancang dengan cara ini (misalnya tutorial fluks yang hebat ini ).

2. React-async . Pendekatan ini sempurna. Ini memungkinkan saya untuk menentukan dalam fungsi khusus di setiap komponen bagaimana menginisialisasi status (tidak peduli apakah secara sinkron atau asinkron) dan fungsi ini disebut sebagai hierarki yang dirender ke HTML. Ia bekerja sedemikian rupa sehingga komponen tidak dirender hingga status benar-benar diinisialisasi. Masalahnya adalah itu membutuhkan Seratyang, sejauh yang saya pahami, ekstensi Node.js yang mengubah perilaku JavaScript standar. Meskipun saya sangat menyukai hasilnya, saya tetap merasa bahwa alih-alih menemukan solusi, kami mengubah aturan permainan. Dan saya pikir kita seharusnya tidak dipaksa melakukan itu untuk menggunakan fitur inti React.js ini. Saya juga tidak yakin tentang dukungan umum dari solusi ini. Apakah mungkin menggunakan Fiber pada hosting web Node.js standar?

3. Saya berpikir sedikit sendiri. Saya belum benar-benar memikirkan detail implementasi tetapi gagasan umumnya adalah bahwa saya akan memperluas komponen dengan cara yang mirip dengan React-async dan kemudian saya akan berulang kali memanggil React.renderComponentToString () pada komponen root. Selama setiap pass, saya akan mengumpulkan callback yang diperpanjang dan kemudian memanggil mereka di dan dari pass untuk mengisi toko. Saya akan mengulangi langkah ini sampai semua penyimpanan yang diperlukan oleh hierarki komponen saat ini akan terisi. Ada banyak hal yang harus diselesaikan dan saya sangat tidak yakin dengan penampilannya.

Apakah saya melewatkan sesuatu? Apakah ada pendekatan / solusi lain? Saat ini saya sedang berpikir untuk menggunakan cara react-async / fibres tetapi saya tidak sepenuhnya yakin tentang hal itu seperti yang dijelaskan pada poin kedua.

Diskusi terkait di GitHub . Ternyata, tidak ada pendekatan resmi atau bahkan solusi. Mungkin pertanyaan sebenarnya adalah bagaimana komponen React dimaksudkan untuk digunakan. Seperti lapisan tampilan sederhana (cukup banyak saran saya nomor satu) atau seperti komponen mandiri dan mandiri nyata?

Jika Anda menggunakan react-router , Anda cukup menentukan willTransitionTometode dalam komponen, yang akan meneruskan Transitionobjek yang dapat Anda panggil .wait.

Tidak masalah jika renderToString sinkron karena callback ke Router.runtidak akan dipanggil hingga semua .waitjanji ed diselesaikan, jadi pada saat renderToStringdipanggil di middleware, Anda dapat mengisi penyimpanan. Bahkan jika penyimpanannya lajang, Anda dapat menyetel datanya untuk sementara waktu tepat sebelum panggilan rendering sinkron dan komponen akan melihatnya.

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

The routesobjek (yang menggambarkan hirarki rute) dibagi verbatim dengan klien dan server

Saya tahu ini mungkin bukan yang Anda inginkan, dan mungkin tidak masuk akal, tetapi saya ingat berhasil sedikit memodifikasi komponen untuk menangani keduanya:

• rendering di sisi server, dengan semua status awal sudah diambil, secara asinkron jika diperlukan)
• rendering di sisi klien, dengan ajax jika diperlukan

Jadi sesuatu seperti:

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

});

Maaf, saya tidak memiliki kode persisnya, jadi ini mungkin tidak berhasil, tetapi saya memposting untuk kepentingan diskusi.

Sekali lagi, idenya adalah untuk mengobati sebagian besar komponen sebagai pandangan bodoh, dan berurusan dengan mengambil data sebanyak mungkin keluar dari komponen.

Saya benar-benar mengacaukannya hari ini, dan meskipun ini bukan jawaban untuk masalah Anda, saya telah menggunakan pendekatan ini. Saya ingin menggunakan Express untuk perutean daripada React Router, dan saya tidak ingin menggunakan Serat karena saya tidak memerlukan dukungan threading di node.

Jadi saya baru saja membuat keputusan bahwa untuk data awal yang perlu diberikan ke penyimpanan fluks saat dimuat, saya akan melakukan permintaan AJAX dan meneruskan data awal ke penyimpanan

Saya menggunakan Fluxxor untuk contoh ini.

Jadi pada rute ekspres saya, dalam hal ini /productsrute:

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

Kemudian saya menginisialisasi metode render yang meneruskan data ke toko.

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

Saya tahu pertanyaan ini ditanyakan setahun yang lalu tetapi kami memiliki masalah yang sama dan kami menyelesaikannya dengan janji bertingkat yang berasal dari komponen yang akan dirender. Pada akhirnya kami memiliki semua data untuk aplikasi dan mengirimkannya begitu saja.

Sebagai contoh:

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

    }

});

dan di router

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

Ingin berbagi dengan Anda pendekatan saya tentang rendering sisi server menggunakan Flux, sedikit disederhanakan misalnya:

1. Katakanlah kita memiliki componentdata awal dari toko:

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

2. Jika kelas memerlukan beberapa data pramuat untuk keadaan awal, mari buat Loader untuk MyComponent:

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

3. Toko:

   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. Sekarang muat saja data di router:

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

hanya sebagai rollup singkat -> GraphQL akan menyelesaikan ini dengan entri untuk tumpukan Anda ...

• tambahkan GraphQL
• gunakan apollo dan react-apollo
• gunakan "getDataFromTree" sebelum Anda mulai merender

-> getDataFromTree akan secara otomatis menemukan semua kueri yang terlibat di aplikasi Anda dan menjalankannya, memisahkan cache apollo Anda di server dan dengan demikian, memungkinkan SSR yang berfungsi penuh .. BÄM