描述这种典型的React SSR场景:
问题:我们如何最好地从客户端的初始形式修改数据?
示例1 :服务器上显示的页面显示了10个用户。然后,客户端异步加载下一个10。新的10个需要与最初的10个合并。
示例2:服务器上呈现的用户名在客户端中得到更新。原始值需要更改。
这里有一些选择:
1-使用状态管理库(例如Redux)。提供给客户端的数据被泵送到Redux存储中,这成为事实的唯一来源,并且所有更新都是通过Redux动作/化简器等来完成的。我想避免使用Redux。该应用程序不够复杂,无法使用Redux。
2-通过props将初始服务器提供的数据从顶层传递到子组件中。子组件可以读取该数据,但它是只读的。如果要修改它,则需要对其进行复制并将其存储在本地状态/上下文中。然后,您将数据复制到两个位置。原始数据属性和容纳更新数据的新状态/上下文位置。这使我感到不理想。
3-使用React Context,并使用服务器中的数据作为上下文的初始值,将组件包装在各种提供程序中。如果需要更改数据,则可以通过上下文提供者提供的set
方法来完成。不利之处在于重新渲染和其他复杂性。
我在这里还有其他选择或事情吗?