Next's 中客户端和服务器之间的共享状态

Question

总结

项目结构：

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 以显示所选项目。

换句话说，当从下拉菜单中选择约翰时，我想显示约翰。

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

附加信息

可以在此处找到代码的可视化示例 Github 代码空间 或此处 Github Repo