客户端组件

客户端组件允许您在服务器上编写可交互的 UI，并可以使用浏览器api.

服务端渲染的特点

• 交互性：客户端组件可以使用useState、useEffect等 React Hook。
• 浏览器 API：客户端组件可以访问浏览器 API，例如 window、document 等。
• hydrate：由于服务端渲染的组件是静态的，因此在客户端渲染时，还需要加载js文件，使得组件能够与进行交互。

use client

"use client" 用于声明当前组件为客户端组件。

在服务端组件中，你可以使用react/client相关的的api, 同时你也可以使用浏览器 api。

但是， "use client" 的文件中所有的模块都会被打包进 bundle 中。因此，我们应该尽可能地减少客户端组件的使用，进而减少bundle的体积。

'use client'

import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

避免嵌套服务端组件

客户端组件中是禁止嵌套服务端组件的，但是服务端组件中是可以嵌套客户端组件。

服务端和客户端混用的模式我们称之为composition component，下一章节将会详细介绍。