我对复杂的数据驱动 UI 的整体架构有一些疑问。以带有侧边栏、标题和 Logo 的常见博客页面为例，其想法是:
- 标题和 Logo 是静态的，可以是服务器端组件
- 侧边栏是静态的，可以是服务器端组件
- 页脚是静态的，可以是服务器端组件
- 博客文章是静态的，可以是服务器端组件
- 只有搜索功能和“点赞”按钮可以是交互式的，并且是客户端组件
在现实世界中，当我构建它时，它会是这样的:
- 我的侧边栏是可折叠的。所以它有用户操作，它需要根据用户选择显示或隐藏。所以我需要将它包装在一个响应状态的客户端组件中
- 我的博客文章位于选项卡或 Accordion 内。我需要将博客内容包装在客户端组件中，因为内容的显示或隐藏取决于用户交互和状态
- 我的博客文章组件将有一个带有布局选项的切换器，例如在网格和列表之间。我需要将它们包装在响应用户输入和状态的客户端布局组件中
- 我的 Logo 取决于设备/窗口大小。我需要访问窗口对象来决定是否需要移动版本或桌面版本的 Logo 。为此，我需要客户端。
- 我的页脚有桌面版或移动版布局，我需要决定加载哪一个。同样，我需要访问窗口对象或使用钩子(Hook)的第三方库
- 如果我添加了一个表格来显示数据，我可能希望使其可排序或可过滤 - 同样，内容或内容的呈现将受到用户交互的影响
最后，我页面上的所有内容都受到某种用户交互或用户诱导状态的影响。我无法想象我在过去几年中构建的 UI 仅以隔离的方式加载静态内容。
我唯一想到的是，对于 SEO，我可以通过服务器端组件加载一些数据驱动的 HTML 作为骨架，以便 SE 机器人可以立即读取数据，然后在准备好后使用交互式客户端等效项进行显示。不确定使用<Suspense />是否可以我可能需要读一点书。
否则，对于上述用例，我是否遗漏了一些东西？除了数据获取之外，我根本无法想到服务器端组件的现实用例，因为页面上的每个项目都将始终受到用户交互的影响(因此:用户界面)。
感谢您的任何澄清:)
最佳答案
有一个很棒的article有关此内容，请参阅 NextJs 应用程序路由器文档。
TLDR:你是对的。在像您所描述的基于博客的系统中，服务器组件的大多数用例都是数据获取。
就我个人而言，我们构建的系统具有很大的依赖性和数据获取 token ，我们将其保留在服务器端。这显着减少了客户端的加载时间，并提高了安全性。在某些情况下，它还允许我们绕过编写 REST api，而直接查询数据。
用于切换侧边栏的简单状态管理似乎并不能真正从服务器端受益。它不会出现大的依赖性问题，或者最好保持私有(private)的私有(private) token 等。正如我之前所说，我同意您的分析，即您的用例不会从 SSR 组件中受益匪浅。
话虽这么说，parallel routes 有很大的潜力。 。这将允许您仅使用 SSR 组件在同一 URL 上切换布局、 Logo 或其他内容。如果您正确构建应用程序，则只有“ Controller /切换器”组件需要成为客户端，其余部分可以是 SSR。 (目前尚不清楚这是否真的会提供很大的性能优势，除非您静态地预渲染所有 SSR 并使用缓存)
我相信您已经意识到这一点，但您还可以选择将 SSR 组件呈现为 CSR 组件的子组件，这将使您能够更动态地选择如何构建项目。
关于next.js - NextJS 13 复杂 UI 中的服务器组件与客户端组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/77352234/