NextJS 13 服务器组件与复杂 UI 中的客户端组件

问：

我对复杂的、数据驱动的 UI 的整体架构有一些疑问。以通常的博客页面为例，带有侧边栏、标题和徽标，其想法是：

• 标头和徽标是静态的，可以是服务器端组件
• 侧边栏是静态的，可以是服务器端组件
• 页脚是静态的，可以是服务器端组件
• 博客文章是静态的，可以是服务器端组件
• 只有搜索函数和点赞按钮可能是交互式的，并且是客户端组件

在现实世界中，当我构建它时，它宁愿是这样的：

• 我的侧边栏是可折叠的。因此，它具有用户操作，需要根据用户的选择显示或隐藏。因此，我需要将其包装在响应状态的客户端组件中
• 我的博客文章位于选项卡或手风琴中。我需要将我的博客内容包装在客户端组件中，因为同样，内容会根据用户交互和状态显示或隐藏
• 我的博客文章组件将有一个带有布局选项的切换器，例如在网格和列表之间。我需要将它们包装在客户端布局组件中，该组件响应用户输入和状态
• 我的徽标取决于设备/窗口大小。我需要访问 window 对象来决定我是想要移动版还是桌面版的徽标。为此，我需要客户端。
• 我的页脚有桌面或移动布局，我需要决定加载哪一个。同样，我需要访问窗口对象或使用钩子的第三方库
• 如果我添加了一个表格来显示数据，我可能希望使其可排序或可过滤 - 同样，内容或内容的呈现将受到用户交互的影响

最后，我页面上的所有内容都受制于某种用户交互或用户诱导状态。我无法想象我在过去几年中构建的 UI 只是以隔离的方式加载静态内容。

我唯一想到的是，对于 SEO，我可以通过服务器端组件加载一些数据驱动的 HTML 作为骨架，以便 SE Bots 可以立即读取数据，然后在准备好后与交互式客户端等效项一起显示。不确定这是否可行，我可能需要做一些阅读。<Suspense />

否则，在上述用例中，我是否遗漏了什么？除了数据获取之外，我根本想不出服务器端组件的真实用例，因为我页面上的每个项目都将始终受到用户交互（因此：用户界面）的约束。

感谢您:)的任何澄清