如何在渲染反應同構應用程序之前在服務器中獲取數據？

Question

我發現了一些問題，但是它們不能與react-router版本4一起工作。真的很奇怪，在文檔中沒有任何有關這方面的信息。

Answer 1

您可以在構造函數中使用axios，根據反應Lifecycles，構造函數在render（）之前出現;

例子：

constructor(props) { 
    super(props); 
    this.state = { 
     items: [], 
    }; 
    axios.get('http://into-the-feed-api.cloud.globoi.com/') 
    .then(res => { 
     const index = this.getIndex(res.data); 
     if (index) { 
     this.setState({ 
      items: [res.data[index]].concat(res.data.slice(0, index).concat(res.data.slice(index + 1, res.data.length))), 
     }); 
     } else { 
     this.setState({ items: res.data }); 
     } 
    }); 
    this.changeHeaderExpanded = this.changeHeaderExpanded.bind(this); 
    } 

Answer 2

事情必須改變了，但早在2015年我寫了有關的文章。您可以閱讀它here

主要想法是將您的行爲納入承諾。服務器端，您必須調用適當的操作（取決於路由），並在致電React.renderToString()（這是同步的）之前等待承諾履行。然後你需要找到一種方法來同步服務器與客戶端計算出的狀態，以避免不必要的做同樣的請求。在文章中，我解釋了我將狀態傳遞給窗口對象。

但是它又是在2015年，它可能已經過時了。

Answer 3

您需要獲取Web服務器上的數據，然後將數據傳遞給您的（愚蠢）組件，該組件只會呈現，而不會執行很多邏輯。

如果您需要更新客戶端上的數據，請查看套接字解決方案或僅在componentdidmount（）中創建間隔提取。

我們目前正在研究這個問題，我們正在使用Airbnb的Hypernova來處理通用渲染，但是您仍然需要一個網絡服務器來允許組件映射一個我們可以緩存的網址並將服務器端包含到我們的網站中頁。 因此，在該網絡服務器上，您可以執行讀取和傳遞，以便將組件的初始狀態設爲html。

Answer 4

https://blog.tableflip.io/server-side-rendering-with-react-and-redux/ - 我在閱讀本文後解決了我的問題。