Javascript 巴别塔6&x2B；React-传递初始数据（在浏览器transpiler中）

我用的是React+Babel 6和网页包。 当我使用Babel 5时，使用页面上的脚本type=“text/Babel”很容易传递初始数据，然后Babel core/browser.js会处理这些数据

但是现在，使用Babel6，我必须在安装组件时加载调用RESTAPI的所有初始数据

这将导致浏览器客户端在服务器上打开连接以呈现前端，然后前端打开新连接以获取数据

这会不会影响我的服务器性能，因为现在我有2个连接，而旧的1个连接被打开了

编辑：

我希望我能继续使用页面上的以下片段：

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

var jsonVar='{vars}'；
ReactDOM.render(
,
document.getElementById（'app-wrapper'）
);

加载服务器端内容，然后组件获取一些数据是一种正常模式。当然，这种设计的一个缺点是，这意味着对数据的初始渲染加上api请求

---

但是，可以使用react组件设置服务器端渲染，在服务器上渲染初始数据。例如，如果您的后端是nodejs，您可以使用。

我通过以下方法解决了此问题： 使用“application/json”脚本标记（传递id）并将序列化数据放入其中

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

---

与Symfony3有什么关系？我正在使用Symfony3来呈现这个参数。如果不是，我可以用这个变量在服务器端呈现模板。是的，我知道在Symfony中也有一些使用process和nodejs的黑客；但是它有点黑客味。谢谢你提供使用renderTOString的技巧！当然它会有用的！

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