Firebase и React с реактивным снимком (предварительный рендеринг)

Я новичок в firebase, только что написал небольшой простой тестовый компонент реакции, прежде чем помещать все данные в firebase, но, к сожалению, я не смог заставить его работать с предварительным рендерингом на стороне сервера. Для меня очень важно сделать его оптимизированным для SEO. , и я искал в Интернете решение, но все еще не мог понять его. Пожалуйста, помогите мне с этим. Большое спасибо заранее.

Простой код ниже будет генерировать только начальное состояние с помощью React-Snapshot, когда я открою страницу, она покажет начальное состояние, а затем обновится до более нового состояния. Но мне нужно сделать так, чтобы объект начального состояния извлекал данные непосредственно из Firebase и генерировал статический html с помощью React-Snapshot.

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>

  ); 

}

}


person Chun Pin Chen    schedule 12.07.2017    source источник
comment
Чун, ты все еще используешь реактивный снимок или рендеринг на стороне сервера?   -  person jasan    schedule 14.08.2017
comment
также хостинг firebase автоматически переключается на 200.html, если маршрут не покрывается моментальным снимком реакции?   -  person jasan    schedule 14.08.2017
comment
@jasan это не так   -  person dgrijuela    schedule 29.01.2018


Ответы (1)


По дружественности к SEO я предполагаю, что вам нужен статический контент вместо динамического (не эксперт по SEO), но firebase работает асинхронно, особенно когда вы используете .on(), который похож на websocket, не имеет значения, будете ли вы монтировать или монтируете этот случай.
Мое скромное предложение для дизайна состоит в том, чтобы получить из firebase на вашем сервере перед отображением страницы (firebase наверняка поддерживает java и node, не уверен в остальном) и установить начальное состояние с этим значением, которое вы извлекли, что гарантирует ваш начальный состояние из firebase. Из этого вы все еще можете использовать это .on() для более позднего поступления значения.

person Zhang Bruce    schedule 12.07.2017
comment
большое спасибо за ваш совет. Это действительно имеет большой смысл, как вы описали. Действительно ценю это. - person Chun Pin Chen; 12.07.2017
comment
нет проблем, отметьте меня как правильный ответ, если вы согласны с моим мнением. спасибо - person Zhang Bruce; 14.07.2017