Reactjs Firebase和React with React快照（预渲染）

我“我是firebase新手，在将所有数据放到firebase之前只编写了一个简单的测试反应组件，但不幸的是，我无法使它与服务器端预渲染一起工作。对我来说，让搜索引擎优化变得友好是非常重要的，我已经在互联网上搜索了解决方案，但仍然无法真正找到它。请帮我解决这个问题。非常感谢

下面的简单代码将只生成带有React Snapshot的初始状态，当我打开页面时，它将显示初始状态，然后更新为较新的状态。但我需要使初始状态对象直接从Firebase获取数据，并使用React Snapshot生成静态html

class FirebaseTestingComponent extends Component {
constructor(){
  super();
  this.state = { 
    speed: 10
  };

}

componentWillMount(){
  const rootRef = firebase.database().ref().child('react');
  const speedRef = rootRef.child('speed');
  speedRef.on('value', snap => {
    this.setState({
      speed: snap.val()
    });
  });
}


render(){
  return (
    <div>
      <h1>{this.state.speed}</h1>
    </div>

  ); 

}

类FirebaseTestingComponent扩展组件{
构造函数（）{
超级（）；
this.state={
速度：10
};
}
组件willmount（）{
const rootRef=firebase.database（）.ref（）.child（'react'）；
const speedRef=rootRef.child（'speed'）；
speedRef.on（'value'，snap=>{
这是我的国家({
速度：snap.val（）
});
});
}
render（）{
返回(
{this.state.speed}
); 
}

---

}

通过SEO友好，我假设您希望静态内容而不是动态内容（不是SEO专家），但firebase是异步运行的，特别是当您使用.on（）时，它就像websocket，不管您是否会装载此案例。

---

我对设计的拙劣建议是在呈现页面之前从服务器中的firebase获取（firebase肯定支持java和node，其余部分则不确定），并使用您获取的值设置初始状态，这将保证您的初始状态来自firebase。从那以后，您仍然可以使用.on（）获取后续价值。

非常感谢您的建议。正如你所描述的，这真的很有道理。真的很感激。没问题，如果你同意我的意见，请记下我的正确答案。Thankshun，你还在使用react snapshot还是服务器端渲染？如果react snapshot没有覆盖路由，firebase主机是否也会自动退回到200.html？@jasan它没有