React JS同构渲染

时间:2016-04-11 18:32:52

标签: node.js reactjs socket.io flux isomorphic-javascript

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

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

在服务器端渲染renderComponentDidMount方法期间,但不是ComponentWillMount。 即使我将Flux逻辑放入componentDidMount() { StoreUser.addChangeListener(this._onChange); Actions.getUser(this.props.params.userid) } 方法,也没有任何反应:调用action,但socket.io不向服务器发送请求以从数据库获取数据。这意味着,没有从数据库中检索数据,也没有对搜索引擎有任何用处。 如果启用了javascript,一切都很完美。

这里有重要的代码:

组件。添加监听器和调用操作:

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

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

getUser

直到这个地方服务器端渲染工作,但服务器本身没有收到String repo = this.args[0] String repo_date = this.args[1] + "T00:00:00.000Z" def query='items.find({"type" : "file","repo" :{"$match" : "${repo}"},"created":{"$lt": "${repo_date}").include("name","created").sort({"$asc": ["created"]})' 事件,所以没有任何进一步发生。 同样,如果在浏览器中启用了javascript,这一切都可以正常工作。服务器接收此调用并返回用户的数据。

如何让服务器接收此事件,返回用户的数据并在发送到客户端之前呈现它? 作为替代方案,可能有不同的方式使其成为SEO友好的吗?

1 个答案:

答案 0 :(得分:3)

React的componentDidMount生命周期挂钩不称为服务器端,as stated in the docs

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

要实现您的目标,您需要服务器端代码:

  • 确定要呈现的组件
  • 调度正确的操作,以便您的商店正确填充
  • 仅渲染您的组件 - 因为数据可用于在初始渲染中传递给您的组件

有关如何实现这一点的详细信息当然取决于您的通道实现,服务器端使用的框架等。