reactjs - Firebase 和 React 以及 React-snapshot(预渲染)

Question

我是 firebase 的新手，只是在将所有数据放入 firebase 之前编写了一些简单的测试 react 组件，但不幸的是我无法使其与服务器端预渲染一起使用。使其 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 和 node，不确定其余的)，并使用您获取的值设置初始状态，这将保证您的初始状态来自 firebase。由此，您仍然可以使用 .on() 来获取稍后传入的值。