Next.js 中服务器端组件（Server Components） 和 客户端组件（Client Components）

在 Next.js 中，服务器端组件（Server Components） 和 客户端组件（Client Components） 是两种不同的 React 组件，旨在优化性能和用户体验。以下是两者的详细对比和使用场景：

服务器端组件（Server Components）

特点：

1. 运行环境：只在服务器上运行。
2. 渲染：组件的 HTML 内容在服务器生成，并在浏览器中直接呈现。
3. 优势：
   • 更快的首屏渲染：减少客户端 JavaScript 的大小。
   • 能直接访问服务器资源：例如数据库、文件系统等，而无需通过 API。
   • 安全性更高：因为代码不会暴露到客户端。
4. 限制：
   • 不能使用浏览器相关的 API（如 window 或 document）。
   • 不能使用 React 的 useState 和 useEffect 等只在客户端运行的 Hook。

适用场景：

• 数据密集型页面（如需要从数据库获取数据的部分）。
• 静态内容，或者页面加载后无需交互的部分。
• 复杂逻辑的处理可以转移到服务器。

如何定义： 在 Next.js 中默认是服务器端组件。例如：

export default function ServerComponent() {
  const