Babel 6 + React - 初期データを渡す（ブラウザ内のトランスファー）

Question

私はReact + Babel 6をwebpackで使用しています。 Babel 5を使用していたとき、ページ上にtype = "text/babel"というスクリプトを使用して初期データを渡すのは簡単でしたが、babel-core/browser.jsが処理します。

しかし、Babel 6を使用すると、コンポーネントのマウント時にREST APIを呼び出すすべての初期データをロードする必要があります。

これは、フロントエンドをレンダリングするために、サーバー上で接続を開くブラウザクライアントになり、その後、フロントエンドは、データを取得するために新しい接続を開きます。

サーバーのパフォーマンスに影響はありませんが、2つの接続と1つ前の1つの接続が存在するようになりましたか？

EDIT：

私はページ上のfolowingスニペットを使用し続けることがしたい：

<script type="text/javascript" src="{{ asset('app/bundle.js') }}"></script> 
<script type="text/babel"> 
    var jsonVar = '{vars}'; 

    ReactDOM.render(
     <App vars={vars}/>, 
     document.getElementById('app-wrapper') 
    ); 
</script> 

Answer 1

それはあなたのサーバー側のコンテンツをロードするために、通常のパターンだと、それから、あなたのコンポーネントがいくつかをつかみますデータ。もちろん、このデザインの1つの欠点は、これは1つの初期レンダリングと apiデータの要求を意味するということです。

しかし、反応コンポーネントを使用してサーバー側のレンダーをセットアップして、サーバー上の初期データをレンダリングすることができます。たとえば、バックエンドがnodejの場合、ReactDOMServer.renderToStringを使用できます。

Answer 2

私はこの問題を次のように解決しました： "application/json"スクリプトタグを使用して（IDを渡して）、内部にシリアル化されたデータを入れます。そして、app.jsで

<script type="application/json" id="app-data"> { "id" : 1 } </script> 

：

var appData = JSON.parse(document.getElementById(script-id).innerHTML)