之前一直不太理解静态生成的具体逻辑是什么，今天仔细研究了一下
客户端组件静态生成流程
- 构建阶段：Next.js 执行客户端组件的渲染函数
- 生成HTML：使用
useState的初始值渲染静态内容 - 客户端加载：浏览器先显示静态HTML
- Hydration：React 将客户端JS绑定到现有DOM
- 状态同步：
useState初始值与静态HTML保持一致
记录下几个要点
- 需要接口数据进行静态生成的页面需要使用对应的api获取数据
- 客户端组件不影响静态生成
- 客户端组件应该尽量封装成组件
- 客户端组件的初始状态还是会被静态生成，例如按钮的初始状态useState(0)，会被渲染成
<button>0</button> - 避免将整个页面标记为客户端组件
