在 Next 的客户端和服务器之间共享状态

问：

总结

项目结构：

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

我想做什么：

我使用 params.rsid 在 page.tsx（服务器端）中动态获取数据。数据是项目列表，page.tsx 默认显示列表中的第一个项目。

我在 layout.tsx 中获取相同的数据，并将其传递给客户端组件 heading.tsx。heading.tsx 组件显示列表中所有项的下拉菜单。单击后，它应更新 page.tsx 以显示所选项目。

换句话说，当从下拉菜单中选择 John 时，我想显示 John，依此类推。

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

其他信息：

代码的可视化示例可以在这里找到 Github codespace 或这里 Github Repo，