两种组件

到目前为止，你在本单元中编写的每个组件都在一个你可能没有注意到的地方运行：在服务器上。这不是你开启的特殊模式，而是默认行为，也是 Next.js 中最重要的概念。

组件恰好有两种，每一种都能提供另一种无法提供的功能。

服务器组件：默认选项

• 它们会在页面发送前在服务器上运行一次
• 它们可以是async，因此可以直接在组件中对数据使用 await
• 它们不会向浏览器发送 JavaScript：用户下载的是结果，而不是代码

问题在于，页面到达浏览器时，服务器组件已经结束了。它只是一个快照，无法记住任何内容、响应点击或发生变化。

客户端组件：选择加入

当你需要让页面响应时，可以在文件最顶部添加一行，让浏览器运行该文件：

'use client';

这会将文件标记为客户端组件，只有客户端组件才能使用：

• 钩子：useState、useEffect 等
• 事件处理程序：onClick、onChange、…
• 浏览器 API：window、localStorage

注意这种取舍。服务器组件速度快、运行安静，但不会变化。客户端组件是动态的，但它的代码必须下载到浏览器中并运行。

所以，从现在开始，你对每个组件都要问的问题，不是“我喜欢哪一个？”，而是“这个特定的部分需要响应用户吗？”如果答案是否定的（通常都是），就把它留在服务器上。