使用昂贵的初始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();
});