Firebase und Reagieren mit react-snapshot (pre-rendering)

Question

Ich bin neu bei Firebase, schrieb nur eine kleine, einfache Test-Komponente, bevor ich alle Daten auf Firebase setze, aber leider konnte ich nicht mit Server arbeiten Side Pre-Rendering Es ist sehr wichtig, dass es SEO-freundlich für mich macht, und ich habe im Internet nach der Lösung gesucht, aber konnte es immer noch nicht wirklich herausfinden. Bitte helfen Sie mir dabei. Vielen Dank

Der einfache Code unten erzeugt nur den Anfangszustand mit React-Snapshot, wenn ich die Seite öffne, wird es den Anfangszustand anzeigen und dann auf den neueren Stand. Aber ich muss das Anfangszustandsobjekt Daten holen machen direkt von Firebase und erzeugen statische HTML mit 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> 

); 

} 

}

Answer 1

von SEO freundliche Ich nehme an, Sie statt dynamische statische Inhalte wollen (kein Experte für SEO), aber Feuerbasis läuft asynchron vor allem, wenn Sie verwenden .on() das ist wie websocket, spielt keine Rolle Wenn Sie dies tun, wird dieser Fall mounten oder diemount.
Mein bescheidener Vorschlag für das Design ist von Firebase in Ihrem Server zu holen, bevor die Seite rendern (Firebase Support Java und Node sicher, nicht sicher über den Rest), und setzen Anfangszustand mit dem Wert, den Sie erhalten, die garantiert Ausgangszustand ist von Firebase. Davon können Sie immer noch das .on() für den späteren Wert verwenden.