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

我是firebase的新成員，在將所有數據放到firebase之前寫了一個簡單的測試反應組件，但很遺憾，我無法使其與Server一起使用Side Pre-Rendering。對我來說讓搜索引擎優化非常重要，並且我在網上尋找解決方案，但仍然無法解決問題，請幫助我解決這個問題。提前。Firebase和React with 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> 

); 

}

}

來源

2017-07-12 Chun Pin Chen

春，你還在使用react-snapshot或服務器端渲染？ – jasan

也做firebase託管automagically回退到200.html如果路線不被反應快照？ – jasan

@ jasan它不是 – dgrijuela

通過搜索引擎友好的我想你想的靜態內容，而不是動態的（不是SEO專家），但火力點，當您使用。對（），它就像WebSocket的異步專門運行，無所謂如果你確實會安裝或者卸載這種情況。
我對這個設計的愚蠢建議是在呈現頁面之前從你的服務器的firebase中獲取（firebase支持java和node，當然不知道其餘部分），並且用你獲取的值設置初始狀態，這將保證你的初始狀態來自firebase。從那你仍然可以使用.on（）爲以後的價值進來

來源

2017-07-12 05:00:23

非常感謝您的建議。正如你所描述的那樣，它確實很有意義。真的很感激它。 –

沒問題，如果您同意我的觀點，請將我標記爲正確答案。謝謝 –

是的。我完全同意你的意見。 –

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

回答

相關問題