React JS 同构渲染

Question

ReactJS，原始 Flux，react-router，nodeJS，socket.io 一切都是最新的。

如果我在浏览器中关闭 javascript，则只会呈现静态代码。

在服务器端呈现 ComponentWillMount 和 render 方法期间，但没有 ComponentDidMount。
即使我将 Flux 逻辑放入 ComponentWillMount 方法中，也没有任何反应：调用操作，但 socket.io 不会向服务器发送请求以从数据库中获取数据。这意味着，不会从数据库中检索任何数据，也不会呈现任何对搜索引擎有用的数据。如果启用 javascript，一切都会完美。

这里是重要的代码片段：

组件。添加侦听器并调用操作：

componentDidMount() {
    StoreUser.addChangeListener(this._onChange);
    Actions.getUser(this.props.params.userid)   
}

客户端的操作要求服务器提供用户数据：

function _getUser (userid) {
  socket.emit('getUser', userid)
}

直到这个地方服务器端渲染工作，但服务器本身没有收到 getUser 事件，所以没有进一步发生。同样，如果在浏览器中启用 javascript，所有这些都可以正常工作。服务器收到此调用和 returns 用户的数据。

我如何让服务器接收这个事件，return 用户的数据并在发送给客户端之前渲染它？作为替代方案，是否有其他方法可以使其对 SEO 友好？

Answer 1

React 的 componentDidMount 生命周期钩子没有在服务端调用，as stated in the docs.

如果您需要在组件的 render 方法中获取数据并在服务器端使用它，您需要在初始渲染期间将此数据作为 props 传递。这意味着，您无法在 componentWillMount 期间获取它，即使调用了挂钩。

要实现你想要的，你需要你的服务器端代码：

确定要渲染的组件
派遣适当的行动，以便您的商店得到适当的填充
仅在那时渲染您的组件 - 因为数据可用于在初始渲染中传递给您的组件

如何实现的细节当然取决于您的 flux 实现、您在服务器端使用的框架等。

React JS 同构渲染

React JS isomorphic render

flux

node.js

socket.io

reactjs

isomorphic-javascript