一、这个技术是什么？

页面中的一部分逻辑只需要读取数据库，另一部分逻辑需要点击、输入和浏览器 API。如果把所有代码都发送到浏览器，首屏 JavaScript 会变多；如果所有代码都放在服务器，按钮又无法交互。

Server Components 与 Client Components 解决的是“哪些代码应该在哪里运行”的问题。

二、没有它之前发生了什么？

所有组件都发送到浏览器执行
↓
客户端 JavaScript 增多，数据获取边界模糊
↓
所有逻辑都放服务器又无法响应点击
↓
Next.js 用组件边界区分服务端和客户端职责

三、核心概念

1. Server Component

默认在服务器执行，可以直接读取服务端数据，不会把组件代码全部发送到浏览器。

2. Client Component

使用文件顶部的 use client 标记，适合状态、事件、浏览器 API 和交互逻辑。

3. 边界传递

Server Component 可以渲染 Client Component，但服务端传给客户端的 Props 需要可序列化。

4. 服务端优先

如果组件不需要交互，优先保留为 Server Component，减少浏览器端负担。

5. 不能混淆运行环境

数据库密钥、文件系统和服务端 API 不能放进 Client Component；浏览器事件也不能直接在 Server Component 中使用。

四、运行流程

五、面试复习

一句话回答

Server Component 负责服务端数据和页面组装，Client Component 负责浏览器交互；Next.js 通过边界控制发送给浏览器的 JavaScript。

高频追问

• 为什么默认是 Server Component？
• use client 是否表示组件只在客户端渲染？
• Server Component 能不能直接使用 useState？
• Client Component 能不能接收任意对象作为 Props？

容易答错

不要把 Server Component 简单等同于传统 SSR，也不要认为 Client Component 完全不会在服务器参与初始渲染。

六、项目展示

知识详情页可以让 Markdown 解析和页面生成留在服务端，把搜索框、收藏按钮和知识图谱画布单独做成 Client Component，形成清晰的性能边界。