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调用

回答

相关问题