Question

我是firebase的新手，在将所有数据放到firebase之前写了一个简单的测试反应组件，但遗憾的是我无法使用Server Side Pre-Rendering。让它成为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一样，如果你不重要会不会发生这种情况我对设计的简单建议是在渲染页面之前从服务器中的firebase中获取（firebase支持java和节点肯定，不确定其余部分），并使用您获取的值设置初始状态，这将保证您的初始状态来自firebase。从那里你仍然可以使用.on（）来获得以后的值。

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

1 个答案: