reactjs 如何让Next 13的服务器组件访问存储在状态中的数据?

plupiseo  于 2023-03-08  发布在  React
关注(0)|答案(1)|浏览(188)

我知道Next 13的全部目的是分离服务器和客户端,所以这个问题现在没有多大意义,但我的动机是:
我想用React和Next js做一个拖放加密小部件应用程序。我的想法是让用户将某些图表拖到一个网格中,然后让他们将硬币拖到所说的图表中。在退出编辑模式或其他模式后,这些图表将显示有关硬币的数据。显然,这些小部件必须是客户端组件,因为它们必须存储它们的位置,它们持有的硬币等状态。
此外,我想充分利用Next 13 fetch特性,这意味着在退出编辑模式后,将小部件显示为服务器组件是明智的,因为在此之后,这些小部件不再是交互式的。
但有一个问题,如何将小部件的位置以及用户将哪些硬币拖入小部件中等信息获取到小部件的备用服务器组件版本?要知道服务器组件本身无法使用上下文,因此必须依赖客户端组件。
我已经浏览了所有的文档,有一件事非常清楚:你不能将服务器组件导入到客户端组件中。你只能将它们作为子组件或 prop 来传递,这意味着它们已经被渲染,这意味着它们已经需要知道要获取哪个API端点,即要获取正确的数据。
你看,这是如何成为一个鸡和蛋的情况。
我曾经考虑过在页面加载时提取所有数据并将其存储在状态中,但这似乎非常麻烦,因为加密数据,特别是历史数据可能相对较大,更不用说必须为所有硬币提取它。
我也考虑过使用文档中下13条推荐的SWR。我的问题变成了:SWR是否与Next 13的获取功能相当?

x7rlezfr

x7rlezfr1#

我将为此创建两个单独的组件:

  1. ChartDesigner,用户与之交互以设计图表,该组件是高度交互的,完全位于客户端,该组件的输出是描述最终设计的JSON结构,包括元素的位置、适用的硬币等。
  2. ChartRenderer,它负责绘制图表。它使用来自设计器组件的“design”JSON和一个数据集来绘制最终的图表。该组件可以在服务器和客户端上绘制。

相关问题