使用昂貴的初始API調用進行React Server Side Rendering

Question

我現在在對React SSR遇到問題。 基本上，我正在構建一個通用的React App，從瀏覽器發送初始請求后，服務器應准備所有必要的數據並調用renderToString（）來將呈現的HTML傳遞給用戶。

在服務器端代碼中，我有類似以下內容：

fetchInitialData（）。then（（response）=> renderToString（...））

如您所見，服務器將等待fetchInitialData完成，然后可以發送呈現的HTML。 但是，這里的問題是fetchInitialData需要很長時間才能完成，這意味着在客戶端，用戶將看到黑屏，直到服務器完成該初始API調用為止。

我的問題是服務器是否可以通過任何方式將加載頁面發送給用戶，當它完成API調用后，使用實際數據更新加載屏幕？

======我可以想到的一種解決方案是讓服務器直接將加載頁面發送給用戶，然后用戶在componentDidMount（）中調用該API，請告知您是否有更好的解決方案

Answer 1

我自己回答這個問題。

如果有人也遇到此問題，則可以考慮使用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();
});