NextJS 的客户端组件 VS 服务端组件
总结
- NextJS 默认为服务端，将两种组件组合使用性能更优
- 服务端组件会默认预渲染（相当于旧的路由系统的 getServerSideProps）
概括：
- 服务器组件：用于静态内容、数据获取和 SEO 友好的元素。
- 客户端组件：用于需要状态、效果或浏览器 API 的交互式元素。
- 组件组合：根据需要 将客户端组件嵌套在服务器组件中，以清晰分离服务器和客户端逻辑
一、客户端组件
指定为在客户端渲染，当创建需要客户端 JS 功能【如状态管理 、事件处理和访问浏览器 API 】的交互式用户界面 (UI) 时应该使用它。
- 位置：文件顶部、第一行，所有代码之前
- 指令： ”use client“
- React 的 hooks 依赖于客户端环境，
useState、useEffect
二、服务端组件【默认】
指定在服务器端执行的函数或文件，NextJS 中的组件默认为服务器组件，在服务端渲染，不能访问【浏览器API、本地缓存、事件监听】等客户端特有功能。
- 位置：文件顶部 或 函数顶部
- 指令：”use server“