NextJS 区分客户端组件与服务端组件

NextJS该区分服务端组件和客户端组件，下表列出了常用使用场景

使用场景	服务端组件	客户端组件
fetch 请求数据。	✅	[⚠️]
访问后端资源（直接）	✅	❌
在服务器上保留敏感信息（访问令牌、API 密钥等）	✅	❌
保持对服务器的大量依赖/减少客户端 JavaScript	✅	❌
添加交互和事件侦听器（onClick(),onChange()等）	❌	✅
使用状态和生命周期效果（useState(), useReducer(), useEffect(), 等）	❌	✅
使用仅限浏览器的 API(window)	❌	✅
使用依赖于状态、效果或仅浏览器 API 的自定义 hooks	❌	✅
使用React 类组件	❌	✅

来源：你好，Next.js 13 - 掘金

组件定义规则

谁需要交互性就将最叶子节点变成客户端组件