私は ReactJS に比較的慣れていないので、「最初のツイートまでの時間」を短縮するためにサーバー側のレンダリングを簡単に実装できることに魅了されました。React の renderComponentToString を使用してサーバー上でマークアップを事前レンダリングする Node-Express-React スタックを実行しています。
コンポーネントを同期的にレンダリングできる場合は問題なく動作しますが、ajax を使用したコンポーネントの実装に関しては苦労しています (ただし、これはコンポーネントの初期化中の非同期操作 (websocket など) に適用されます)。
React Web サイトの例を見てみましょう: http://facebook.github.io/react/tips/initial-ajax.html
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.user.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
renderComponentToString を使用すると componentDidMount がトリガーされないため、サーバーでは機能しません。この単純なケースは、(jQuery の $.get を使用する代わりに) クライアントとサーバーで同じ HTTP リクエスト ラッパーを使用し、コンポーネントをインスタンス化して prop として渡す前にデータをプリフェッチすることで回避できます。
ただし、実際の複雑なアプリでは、非同期の依存関係が非常に複雑になる可能性があり、プリフェッチは React 構造を構築する子孫のアプローチにはあまり適していません。実際に何もマウントせずにサーバー上でレンダリングできる非同期初期化パターンを React に実装するにはどうすればよいですか (つまり、PhantomJS のような DOM エミュレーションはありません。これが renderComponentToString を使用することの要点です)。