使用昂贵的初始 API 调用反应服务器端渲染
React Server Side Rendering with expensive initial API call
我现在遇到 React SSR 的问题。
基本上我正在构建一个通用的 React 应用程序,在从浏览器发送初始请求时,服务器应该准备所有必要的数据并调用 renderToString() 将呈现的 HTML 传递给用户。
在我的服务器端代码中,我有类似的内容:
fetchInitialData().then((response) => renderToString(...))
如您所见,服务器将等待 fetchInitialData 完成,然后它可以发送呈现的 HTML。然而,这里的问题是 fetchInitialData 需要很长时间才能完成,这意味着在客户端用户将看到一个空白屏幕,直到服务器完成初始 API 调用。
我的问题是,服务器有没有办法向用户发送加载页面,当它完成 API 调用时,用实际数据更新加载屏幕?
======
我能想到的一种解决方案是让服务器直接将加载页面发送给用户,然后用户在 componentDidMount() 中调用 API
有更好的请指教
我正在为自己回答这个问题。
如果有人也遇到这个问题,可以考虑使用facebook开发的bigpipe技术。
整个想法是服务器仍然发送 html,但没有 < /body > 和 < /html >。所以它实际上是一个未闭合的html。客户端收到
我现在遇到 React SSR 的问题。 基本上我正在构建一个通用的 React 应用程序,在从浏览器发送初始请求时,服务器应该准备所有必要的数据并调用 renderToString() 将呈现的 HTML 传递给用户。
在我的服务器端代码中,我有类似的内容:
fetchInitialData().then((response) => renderToString(...))
如您所见,服务器将等待 fetchInitialData 完成,然后它可以发送呈现的 HTML。然而,这里的问题是 fetchInitialData 需要很长时间才能完成,这意味着在客户端用户将看到一个空白屏幕,直到服务器完成初始 API 调用。
我的问题是,服务器有没有办法向用户发送加载页面,当它完成 API 调用时,用实际数据更新加载屏幕?
====== 我能想到的一种解决方案是让服务器直接将加载页面发送给用户,然后用户在 componentDidMount() 中调用 API 有更好的请指教
我正在为自己回答这个问题。
如果有人也遇到这个问题,可以考虑使用facebook开发的bigpipe技术。
整个想法是服务器仍然发送 html,但没有 < /body > 和 < /html >。所以它实际上是一个未闭合的html。客户端收到