[node.js] 비동기 적으로 초기화 된 React.js 구성 요소의 서버 측 렌더링 전략

의 가장 큰 장점 중 하나 React.js이 있어야하는데 서버 측 렌더링 . 문제는 키 기능 React.renderComponentToString()이 동기식이므로 구성 요소 계층이 서버에서 렌더링 될 때 비동기 데이터를로드 할 수 없다는 것입니다.

페이지의 어느 곳에 나 놓을 수있는 주석 작성을위한 범용 구성 요소가 있다고 가정 해 보겠습니다. 여기에는 하나의 속성, 일종의 식별자 (예 : 주석이 배치되는 기사의 ID) 만 있고 나머지 모든 것은 구성 요소 자체에서 처리합니다 (주석로드, 추가, 관리).

저는 Flux 아키텍처가 정말 마음에 듭니다. 왜냐하면 그것은 많은 일을 훨씬 쉽게 만들어주고 그 저장소 는 서버와 클라이언트 사이의 상태 공유에 완벽하기 때문입니다. 댓글이 포함 된 스토어가 초기화되면 직렬화하여 쉽게 복원 할 수있는 서버에서 클라이언트로 보낼 수 있습니다.

질문은 내 상점을 채우는 가장 좋은 방법입니다. 지난 며칠 동안 저는 인터넷 검색을 많이했고 몇 가지 전략을 접했습니다. React의이 기능이 얼마나 “홍보”되고 있는지 고려할 때 정말 좋은 전략은 없었습니다.

1. 제 생각에 가장 간단한 방법은 실제 렌더링이 시작되기 전에 모든 매장을 채우는 것입니다. 즉, 구성 요소 계층 외부 어딘가 (예 : 라우터에 연결됨)를 의미합니다. 이 접근법의 문제점은 페이지 구조를 거의 두 번 정의해야한다는 것입니다. 더 복잡한 페이지, 예를 들어 다양한 구성 요소 (실제 블로그 게시물, 댓글, 관련 게시물, 최신 게시물, 트위터 스트림 …)가있는 블로그 페이지를 고려하십시오. React 구성 요소를 사용하여 페이지 구조를 디자인하고 다른 곳에서이 현재 페이지에 필요한 각 저장소를 채우는 프로세스를 정의해야합니다. 그것은 나에게 좋은 해결책이 아닌 것 같습니다. 안타깝게도 대부분의 동형 튜토리얼은 이런 방식으로 설계되었습니다 (예 :이 훌륭한 플럭스 튜토리얼 ).

2. React-async . 이 접근 방식은 완벽합니다. 이를 통해 각 구성 요소의 특수 함수에서 상태를 초기화하는 방법을 간단하게 정의 할 수 있으며 (동기식이든 비동기식이든 상관 없음) 이러한 함수는 계층 구조가 HTML로 렌더링 될 때 호출됩니다. 상태가 완전히 초기화 될 때까지 구성 요소가 렌더링되지 않는 방식으로 작동합니다. 문제는 섬유 가 필요하다는 것입니다.내가 이해하는 한 표준 JavaScript 동작을 변경하는 Node.js 확장입니다. 나는 결과가 정말 마음에 들지만 해결책을 찾는 대신 게임의 규칙을 변경 한 것 같습니다. 그리고 React.js의 핵심 기능을 사용하기 위해 그렇게해서는 안된다고 생각합니다. 이 솔루션의 일반적인 지원에 대해서도 잘 모르겠습니다. 표준 Node.js 웹 호스팅에서 Fiber를 사용할 수 있습니까?

3. 나는 혼자서 조금 생각하고 있었다. 구현 세부 사항을 철저히 생각하지는 않았지만 일반적인 생각은 React-async와 유사한 방식으로 구성 요소를 확장 한 다음 루트 구성 요소에서 React.renderComponentToString ()을 반복적으로 호출한다는 것입니다. 각 패스 중에 확장 콜백을 수집 한 다음 패스 및 패스에서 호출하여 상점을 채 웁니다. 현재 구성 요소 계층 구조에 필요한 모든 저장소가 채워질 때까지이 단계를 반복합니다. 해결해야 할 사항이 많고 특히 성능에 대해 확신이 없습니다.

내가 뭐 놓친 거 없니? 다른 접근법 / 솔루션이 있습니까? 지금은 react-async / fibers 방식을 고려하고 있지만 두 번째 요점에서 설명한대로 완전히 확신 할 수 없습니다.

GitHub에 대한 관련 토론 . 분명히 공식적인 접근 방식이나 해결책이 없습니다. 진짜 질문은 React 컴포넌트가 어떻게 사용되는지 일 것입니다. 단순한 뷰 레이어 (제 제안 번호 1)처럼 또는 실제 독립형 및 독립형 구성 요소처럼?

답변

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

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

});

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