Firebase 和 React with react-snapshot（预渲染）

Question

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

下面的简单代码只会用 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>

  ); 

}

}

Answer 1

出于对 SEO 友好的考虑，我假设您想要静态内容而不是动态内容（不是 SEO 专家），但是 firebase 异步运行，尤其是当您使用 .on() 时，这就像 websocket，无论您使用 willmount 还是 didmount 都没有关系这种情况。
我对设计的谦虚建议是在呈现页面之前从服务器中的 firebase 获取（firebase 支持 java 和节点肯定，不确定其余部分），并使用您获取的值设置初始状态，这将保证您的初始状态来自 firebase。从那以后你仍然可以使用那个 .on() 来获得以后的价值。

Firebase 和 React with react-snapshot（预渲染）

Firebase and React with react-snapshot (pre-rendering)

prerender

firebase

reactjs

firebase-realtime-database