在需要使用客户端特性如window
对象、事件处理或客户端hooks(如useState
, useContexts
)的情况下,必须将React组件作为客户端组件。例如,app header
组件需要作为客户端组件,因为它包含了点击事件处理。要将组件设为客户端组件,在文件顶部加入use client
指令。在客户端完成渲染的组件可以在浏览器控制台使用console.log
输出信息。Next.js框架支持对客户端组件进行预渲染,即在服务器端生成所需的HTML和JavaScript并发送给前端。如果组件进行了预渲染,那么其内容即使在客户端组件中也可以在页面源代码中被找到。