Nextjs 13：客户端和服务器之间共享状态的模式有哪些

Question

项目结构：

app/
    [rsid]
       [categorySlug]
          [subCategorySlug]
             page.tsx
         layout.tsx
         template.tsx
         error.tsx
         loading.tsx

我想做什么：

我正在使用

page.tsx

在

params.rsid

（服务器端）内动态获取数据。数据是一个项目列表，

page.tsx

默认显示列表中的第一个项目。

我在

layout.tsx

中获取相同的数据并将其传递给客户端组件

heading.tsx

。

heading.tsx

组件显示列表中所有项目的下拉菜单。单击时，它应该更新

page.tsx

以显示所选项目。

我应该遵循什么模式来实现这一目标？比你提前！

我已经尝试过 zustand、redux 但我认为它们不起作用