我的问题是关于服务器端渲染以及使用 SSR 时在 HTML 标记中执行的 React 客户端检查过程。
如果服务器生成的 HTML 与相同内容的客户端虚拟表示不匹配,React 会放弃从服务器接收的 HTML,并重新渲染客户端版本。
就我而言,我的主内容页面的某些部分是根据一些我确信不会更改客户端的内部数据在服务器中动态呈现的。
现在,我必须在初始有效负载中传递内部数据,以便 React 可以在协调过程中创建虚拟表示,以便检查正常并且不会重新渲染内容。
我想避免向浏览器发送不需要的数据。
有什么方法可以将组件(树)设置为静态,以便协调过程忽略它并避免重新渲染内容?
谢谢!
为了防止客户端组件获取服务器端已获取的数据,您可以将数据以 JSON 形式存储在
<script>
标签中,并将其用作客户端的默认值。这种方法确保数据在服务器端渲染过程中仅获取一次并在客户端重复使用。
我在这里提供了详细的答案以及有关如何实现此解决方案的代码示例: 防止客户端组件获取服务器端已获取的数据