反应服务器/客户端渲染

Posted

技术标签:

【中文标题】反应服务器/客户端渲染【英文标题】:React server/client rendering 【发布时间】:2015-05-09 05:13:00 【问题描述】:

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

服务器渲染:

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

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

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

此外,另一种方法是在 componentDidMount 函数中进行 ajax 调用。你更喜欢哪种方式?如果您能在没有脚本标记或 ajax 调用的情况下帮助我这样做,那就太好了... :)

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

以上是关于反应服务器/客户端渲染的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 React HashRouter 和 Apollo 客户端渲染反应类组件?

反应不渲染类

与 Socket.io 反应 - 在“socket.on”事件上不断地重新渲染

反应路由器和快递

哪种方法更快,表示:服务器端渲染与客户端渲染

React Redux 服务器渲染但客户端获取数据