React服務器端渲染與昂貴的初始API調用

我現在遇到反應SSR的問題。基本上我構建了一個通用的React應用程序，在從瀏覽器發送初始請求時，服務器應該準備好所有必要的數據並調用renderToString（）將呈現的HTML傳遞給用戶。React服務器端渲染與昂貴的初始API調用

在我的服務器端代碼，我有這樣的：

fetchInitialData（），然後（（響應）=> renderToString（...））

正如你可以看到它時，服務器會。等待fetchInitialData完成，然後它可以發送呈現的HTML。但是，這裏的問題是fetchInitialData需要很長時間才能完成，這意味着在客戶端用戶將看到一個空白屏幕，直到服務器完成初始API調用。

我的問題是有沒有辦法讓服務器發送加載頁面給用戶，當它完成API調用時，用實際數據更新加載屏幕？

====== 一個解決方案，我能想到的是讓服務器直接發送加載頁面的用戶，然後用戶調用，在componentDidMount（） API請告知，如果你有一個更好的

來源

2017-05-05 JI .ZHANG

您可以創建一個簡單（衰落）HTML預期結果的內容（只是適合在屏幕的部分）和硬編碼該頁面中的內容。提取後，您可以用真實數據替換一個替換操作中的虛假內容。 –

@JeroenHeier多數民衆贊成在我實際上想要做的。但是，服務器如何用實際內容替換硬編碼的內容？我的想法是，在服務器調用res.send（html）之後，它再也無法控制那件作品了 –

也許[this]（https://medium.com/@justinjung04/react-server-side-rendering-and- hot-reloading-ffb87ca81a89）可以幫助你。 –

我正在回答這個問題。

如果有人也遇到這個問題，可以考慮使用facebook開發的bigpipe技術。

整個想法是服務器仍然發送html，但沒有</body>和</html>。所以它實際上是一個未封閉的html。一旦收到<腳本>，客戶端將立即執行它，這意味着客戶端和服務器都在做它的工作，沒有人浪費時間。

在實施方面，假設你使用的NodeJS：

app.use('/', (req, res) => { 
    res.write(templateHTML); // this has unclosed HTML and all scripts 

    // doing expensive API call here 
    result = API.call() 
    // if code runs here, we get response from API call 
    res.write(result + '</body></html>'); 
    res.end(); 
});

來源

2017-06-28 22:50:55

React服務器端渲染與昂貴的初始API調用

回答

相關問題