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，所有这些都可以正常工作。服务器接收到这个调用并返回用户的数据。

如何让服务器接收此事件，返回用户数据并在发送给客户端之前呈现它？ 作为替代方案，是否有不同的方法使其对 SEO 友好？

Answer 1

React 的 componentDidMount 生命周期钩子未在服务器端调用 as stated in the docs。

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

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

• 确定要渲染的组件
• 发送正确的操作，以便您的商店正确填充
• 仅在那时渲染您的组件 - 因为数据可用于在初始渲染中传递给您的组件

如何实现这一点的细节当然取决于您的通量实现、您使用的服务器端框架等。