'use client'

在组件里如果需要使用客户端特有的东西，比如 window 对象，或者要处理事件，或者在组件里要使用一些客户端 Hook，比如 useState。这些情况我们都必须要使用客户端组件。

打开 app-header 这个组件，默认在 app 目录里的组件都会作为服务端组件，不过因为之前我们在这个组件里处理了一个点击事件，所以它必须得是一个客户端组件。

把组件转换成客户端组件，就是在文件的顶部，使用一个 'use client' 这个指令。这样这个组件就会是一个客户端组件，可以在客户端环境完成渲染。

演示

在组件里，用 console.log 输出一行文字，“AppHeader”

在浏览器的控制台观察一下，你会发现输出了 “AppHeader” 这行文字，因为这个组件是一个客户端组件，会在客户端完成的渲染。

预渲染

再观察一下在终端的控制台，这里同样输出了 “AppHeader” 这行文字，这是因为 Next.js 框架可以对客户端组件做预渲染，也就是 Next.js 也会在服务端做一些处理，比如生成组件需要的 HTML，还有一些 JavaScript ，再把它们发送给前端使用。

复制一下这个 AppHeader 组件视图里显示的文字，然后查看页面的源代码，搜索复制文字，在页面源代码里可以找到这行文字。组件如果是一个客户端组件，如果不做预渲染的话，在页面的源代码这里不会找到页面上显示的内容。能找到，就说明组件做了预渲染。