反应服务器/客户端渲染

时间:2015-03-07 18:26:38

标签: express mongoose reactjs client-side server-side

我目前正在使用express,mongoose和react开发一个应用程序。

服务器呈现:

  • 从我的本地API(存储在mongoose中)获取数据
  • React.renderToString组件,其中包含来自API的数据作为道具

这适用于静态UI。但是,现在我想在UI中进行一些交互。因此,我必须再次在客户端使用相同的道具呈现相同的组件。现在,我正在努力寻找在客户端获取我的mongoose数据(道具)的最佳方法...是否真的有必要将mongoose中的所有json数据保存在脚本标签中,然后将其读出来?

if (typeof window !== 'undefined') {
    var props = JSON.parse(document.getElementById('props').innerHTML);
    React.render(MyComponent(props), document.getElementById('reactMarkup'));
} 

此外,另一种方法是在componentDidMount函数中进行ajax调用。你更喜欢哪种方式?如果没有脚本标记或ajax调用可以帮助我这样做会很棒......:)

1 个答案:

答案 0 :(得分:0)

如果您希望React透明地升级到客户端的SPA,则需要在客户端上使用与服务器上相同的道具构建顶级组件。最常见的方法是您已经提到的方法:序列化您使用的道具并将它们传递到脚本块或类似的主页中。

如果您在componentDidMount中执行Ajax请求,那么您将渲染一次没有属性,覆盖预渲染的HTML,然后使用正确的属性重新渲染 - 我可能会避免使用此技术。