javascript - 使用昂贵的初始 API 调用 react 服务器端渲染

Question

我现在遇到 React SSR 的问题。基本上我正在构建一个通用的 React 应用程序，在从浏览器发送初始请求时，服务器应该准备所有必要的数据并调用 renderToString() 将呈现的 HTML 传递给用户。

在我的服务器端代码中，我有类似的东西:

fetchInitialData().then((response) => renderToString(...))

如您所见，服务器将等待 fetchInitialData 完成，然后它可以发送呈现的 HTML。然而，这里的问题是 fetchInitialData 需要很长时间才能完成，这意味着在客户端用户将看到一个空白屏幕，直到服务器完成初始 API 调用。

我的问题是服务器有没有办法向用户发送加载页面，当它完成 API 调用时，用实际数据更新加载屏幕？

======我能想到的一种解决方案是让服务器直接将加载页面发送给用户，然后用户在 componentDidMount() 中调用该 API有更好的请指教

Answer 1

我正在为自己回答这个问题。

如果有人也遇到这个问题，可以考虑使用facebook开发的bigpipe技术。

整个想法是服务器仍然发送 html，但没有 和 。所以它实际上是一个未封闭的html。客户端收到<script>后会立即执行，也就是说客户端和服务器都在做自己的工作，没有人在浪费时间。

在实现方面，假设您使用的是 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();
});