我正在构建一个服务器端渲染实用程序以进行反应。我没有使用ReactDOMServer
及其关联的renderToString
方法。相反,我将应用程序渲染到轻量级的服务器端DOM。各个组件可以异步加载数据(通过AJAX,setTimeout等),当所有的promise都被解析后,我将最终的HTML字符串发送到浏览器。异步数据存储在名为INLINE_CACHE
的javascript变量中,以便在客户端中使用。 这部分完美无瑕。
在客户端上,应用程序组件将安装到文档中。当子组件转到加载数据时,我的数据控制器可以看到INLINE_CACHE
并立即解决承诺。 此部分也适用。
当每个承诺得到解决时,我会使用触发重新渲染的数据调用setState
。我的问题是,即使承诺立即得到解决,它们仍然按照A +规范异步解析。这意味着初始渲染不具备所需的所有数据。一瞬间(下一个刻度,如果你愿意),数据就在那里并重新渲染。 但是由于初始渲染与服务器的现有标记(以及相关的校验和)不匹配,因此反应抱怨......理所当然。
我需要做的是以某种方式将应用程序组件呈现在分离的DOM节点(或仅虚拟DOM)中,等待所有承诺解析,然后将节点挂载到文档。目标是react将尝试重用从服务器呈现的现有标记。我知道如何生成校验和等等 - 这不是问题所在。我只需要做出反应,在内存中渲染我的应用程序,直到我告诉它挂载到真正的DOM - 此时出现差异。这可能与React有关吗?