Express React服务器/客户端呈现

Express React服务器/客户端呈现,express,mongoose,reactjs,client-side,server-side,Express,Mongoose,Reactjs,Client Side,Server Side,我目前正在用express、mongoose和react开发一个应用程序 服务器呈现: 从本地API获取数据(存储在mongoose中) React.renderToString组件,将来自API的数据作为道具 这在静态UI中工作良好。但是,现在我想在UI中进行一些交互。因此,我必须在客户端再次使用相同的道具渲染相同的组件。现在我正在努力寻找在客户端获取猫鼬数据(道具)的最佳方法。。。是否真的有必要将mongoose的所有json数据保存在一个脚本标记中,然后像这样读出 if (typeof

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

服务器呈现:

  • 从本地API获取数据(存储在mongoose中)
  • React.renderToString
    组件,将来自API的数据作为道具
这在静态UI中工作良好。但是,现在我想在UI中进行一些交互。因此,我必须在客户端再次使用相同的道具渲染相同的组件。现在我正在努力寻找在客户端获取猫鼬数据(道具)的最佳方法。。。是否真的有必要将mongoose的所有json数据保存在一个脚本标记中,然后像这样读出

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

此外,另一种方法是在componentDidMount函数中进行ajax调用。你喜欢哪种方式?如果您能在不使用脚本标记或ajax调用的情况下帮助我完成这项工作,那就太好了……:)

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

如果在
componentDidMount
中执行Ajax请求,将只渲染一次而不使用属性,覆盖预渲染的HTML,然后使用正确的属性重新渲染,我可能会避免使用这种技术