使用React的页面的部分SSR呈现

时间:2019-07-10 10:16:21

标签: reactjs ssr

情况:

我们正在使用SSR对匿名用户进行反应,并且一切正常。我们想对经过身份验证的用户使用SSR,但是,我们尚未进行测试以证明我们对用户数据具有“线程安全性”。

问题:

我一直在研究一种折衷方案,其中我们使用SSR对页眉,页脚和其他静态元素进行“部分渲染”。这意味着我们可以为用户提供一些值得看的东西,同时我们可以在客户端渲染页面时改善用户的体验,而无需处理用户特定的数据(因为我们还没有准备好这样做)。

我已经将所有内容都构建好了,并且一切都很好用。但是,React可以很好地配合,但实际上不喜欢:

a)在DOM 的入口点具有SSRed内容(调用渲染,而不是水化,因为我们是客户端渲染而不是水化)

Warning: render(): Calling ReactDOM.render() to hydrate server-rendered markup will stop working in React v17. Replace the ReactDOM.render() call with ReactDOM.hydrate() if you want React to attach to the server HTML.

b)SSRed内容与客户端呈现的内容不完全匹配。

Warning: Expected server HTML to contain a matching <div> in <div>.

对于这种情况,文档提出了一种两阶段渲染方法,其中我们首先在客户端中渲染静态内容,然后将其交换。这对我们来说是不切实际的,因为大量的工作意味着我们要完成SSR并解决测试问题,而不是半途而废。

有没有一种方法可以告诉React不用担心DOM中的差异并始终将其替换?

还是我放弃并致力于适当的SSR解决方案?

1 个答案:

答案 0 :(得分:0)

最后,我们渲染到另一个div,然后在React渲染到DOM时被CSS翻转。这样非常干净。