กลยุทธ์สำหรับการแสดงผลฝั่งเซิร์ฟเวอร์ของคอมโพเนนต์ React.js ที่เตรียมใช้งานแบบอะซิงโครนัส

หนึ่งในข้อได้เปรียบที่ใหญ่ที่สุดของReact.jsควรจะเป็นการแสดงผลด้านเซิร์ฟเวอร์ ปัญหาคือฟังก์ชันคีย์React.renderComponentToString()เป็นแบบซิงโครนัสซึ่งทำให้ไม่สามารถโหลดข้อมูลอะซิงโครนัสใด ๆ ได้เนื่องจากลำดับชั้นของคอมโพเนนต์แสดงบนเซิร์ฟเวอร์

สมมติว่าฉันมีองค์ประกอบสากลสำหรับการแสดงความคิดเห็นซึ่งฉันสามารถวางไว้ที่ใดก็ได้บนหน้า มีเพียงคุณสมบัติเดียวตัวระบุบางประเภท (เช่น id ของบทความด้านล่างที่มีการใส่ความคิดเห็น) และทุกอย่างจะถูกจัดการโดยคอมโพเนนต์เอง (การโหลดการเพิ่มการจัดการความคิดเห็น)

ฉันชอบสถาปัตยกรรมFluxมากเพราะมันทำให้หลาย ๆ อย่างง่ายขึ้นมากและร้านค้าก็เหมาะสำหรับการแชร์สถานะระหว่างเซิร์ฟเวอร์และไคลเอนต์ เมื่อเริ่มต้นร้านค้าของฉันที่มีความคิดเห็นแล้วฉันก็สามารถทำให้เป็นซีเรียลไลซ์และส่งจากเซิร์ฟเวอร์ไปยังไคลเอนต์ซึ่งเรียกคืนได้อย่างง่ายดาย

คำถามคือวิธีใดเป็นวิธีที่ดีที่สุดในการเติมข้อมูลร้านค้าของฉัน ในช่วงหลายวันที่ผ่านมาฉัน Googling มากและฉันเจอกลยุทธ์บางอย่างซึ่งดูเหมือนจะไม่ดีเลยเมื่อพิจารณาว่าคุณสมบัติของ React นี้ได้รับการ "โปรโมต" มากแค่ไหน

1. ในความคิดของฉันวิธีที่ง่ายที่สุดคือเติมข้อมูลร้านค้าทั้งหมดของฉันก่อนที่การแสดงผลจริงจะเริ่มขึ้น นั่นหมายถึงบางแห่งที่อยู่นอกลำดับชั้นของส่วนประกอบ (เช่นต่อกับเราเตอร์ของฉัน) ปัญหาของวิธีนี้คือฉันจะต้องกำหนดโครงสร้างหน้าสองครั้ง พิจารณาหน้าเว็บที่ซับซ้อนมากขึ้นตัวอย่างเช่นหน้าบล็อกที่มีส่วนประกอบต่างๆมากมาย (โพสต์ในบล็อกจริงความคิดเห็นโพสต์ที่เกี่ยวข้องโพสต์ใหม่ล่าสุดกระแส Twitter ... ) ฉันจะต้องออกแบบโครงสร้างเพจโดยใช้ส่วนประกอบ React จากนั้นที่อื่นฉันจะต้องกำหนดขั้นตอนการเติมข้อมูลแต่ละร้านที่ต้องการสำหรับเพจปัจจุบันนี้ ดูเหมือนจะไม่ใช่ทางออกที่ดีสำหรับฉัน น่าเสียดายที่แบบฝึกหัด isomorphic ส่วนใหญ่ได้รับการออกแบบด้วยวิธีนี้ (เช่นการสอนเกี่ยวกับฟลักซ์ที่ยอดเยี่ยมนี้)

2. ตอบสนอง-async แนวทางนี้เหมาะอย่างยิ่ง ช่วยให้ฉันกำหนดฟังก์ชันพิเศษในแต่ละองค์ประกอบว่าจะเริ่มต้นสถานะอย่างไร (ไม่สำคัญว่าจะซิงโครนัสหรืออะซิงโครนัส) และฟังก์ชันเหล่านี้เรียกว่าลำดับชั้นกำลังแสดงผลเป็น HTML มันทำงานในลักษณะที่ส่วนประกอบจะไม่แสดงผลจนกว่าสถานะจะเริ่มต้นอย่างสมบูรณ์ ปัญหาคือมันต้องใช้Fibersซึ่งเท่าที่ฉันเข้าใจส่วนขยาย Node.js ที่เปลี่ยนแปลงพฤติกรรม JavaScript มาตรฐาน แม้ว่าฉันจะชอบผลลัพธ์มาก แต่ก็ยังดูเหมือนว่าสำหรับฉันแทนที่จะหาวิธีแก้ปัญหาเราเปลี่ยนกฎของเกม และฉันคิดว่าเราไม่ควรถูกบังคับให้ทำเช่นนั้นเพื่อใช้คุณสมบัติหลักของ React.js ฉันยังไม่แน่ใจเกี่ยวกับการสนับสนุนทั่วไปของโซลูชันนี้ เป็นไปได้ไหมที่จะใช้ Fiber บนเว็บโฮสติ้ง Node.js มาตรฐาน

3. ฉันกำลังคิดเล็กน้อยด้วยตัวเอง ฉันไม่ได้คิดถึงรายละเอียดการใช้งานจริง ๆ แต่แนวคิดทั่วไปคือฉันจะขยายส่วนประกอบในลักษณะเดียวกันกับ React-async จากนั้นฉันจะเรียก React.renderComponentToString () ซ้ำ ๆ บนองค์ประกอบราก ในแต่ละรอบฉันจะรวบรวมการโทรกลับที่ขยายออกแล้วโทรหาพวกเขาที่และของบัตรเพื่อเติมข้อมูลร้านค้า ฉันจะทำขั้นตอนนี้ซ้ำจนกว่าร้านค้าทั้งหมดที่ต้องการตามลำดับชั้นของส่วนประกอบปัจจุบันจะถูกเติม มีหลายสิ่งที่ต้องแก้ไขและฉันไม่แน่ใจเป็นพิเศษเกี่ยวกับประสิทธิภาพ

ฉันพลาดอะไรไปหรือเปล่า? มีแนวทาง / แนวทางแก้ไขอื่นหรือไม่? ตอนนี้ฉันกำลังคิดที่จะใช้วิธี react-async / fibre แต่ฉันไม่แน่ใจอย่างสมบูรณ์ตามที่อธิบายไว้ในจุดที่สอง

การอภิปรายที่เกี่ยวข้องบน GitHub เห็นได้ชัดว่าไม่มีแนวทางอย่างเป็นทางการหรือแม้แต่วิธีแก้ปัญหา อาจจะเป็นคำถามที่แท้จริงว่าส่วนประกอบของ React มีไว้เพื่อใช้งานอย่างไร เช่นเดียวกับเลเยอร์มุมมองที่เรียบง่าย (ข้อเสนอแนะของฉันอันดับหนึ่ง) หรือชอบส่วนประกอบอิสระและแบบสแตนด์อโลนที่แท้จริง?

หากคุณใช้react-routerคุณสามารถกำหนดwillTransitionToวิธีการในส่วนประกอบซึ่งจะส่งผ่านTransitionวัตถุที่คุณสามารถเรียก.waitใช้ได้

ไม่สำคัญว่า renderToString จะซิงโครนัสหรือไม่เนื่องจากการโทรกลับไปยังRouter.runจะไม่ถูกเรียกจนกว่า.waitสัญญา ed ทั้งหมดจะได้รับการแก้ไขดังนั้นเมื่อถึงเวลาที่renderToStringเรียกว่ามิดเดิลแวร์คุณสามารถเติมข้อมูลร้านค้าได้ แม้ว่าร้านค้าจะเป็น singletons คุณก็สามารถตั้งค่าข้อมูลของพวกเขาได้ในเวลาเพียงชั่วคราวก่อนที่จะมีการเรียกใช้การแสดงผลแบบซิงโครนัสและส่วนประกอบจะเห็น

ตัวอย่างมิดเดิลแวร์:

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 เพราะฉันไม่ต้องการการรองรับเธรดในโหนด

ดังนั้นฉันเพิ่งตัดสินใจว่าสำหรับข้อมูลเริ่มต้นที่ต้องแสดงผลไปยังที่เก็บฟลักซ์เมื่อโหลดฉันจะดำเนินการตามคำขอ 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. หากคลาสต้องการข้อมูลที่โหลดไว้ล่วงหน้าสำหรับสถานะเริ่มต้นให้สร้าง Loader สำหรับ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 จะค้นหาคำค้นหาที่เกี่ยวข้องทั้งหมดในแอปของคุณโดยอัตโนมัติและดำเนินการเหล่านั้นโดยใส่แคชอพอลโลของคุณบนเซิร์ฟเวอร์และทำให้ SSR ทำงานได้อย่างเต็มที่ .. BÄM