Next14 Server Components 和 Client Components 的区别

Server Components  

Server Components 是在服务端渲染（SSR）时生成的组件。它们在服务器上运行，生成 HTML，然后将 HTML 发送到客户端。  

特性：

• 默认行为： 在 app 目录下创建的页面组件默认是 Server Components。
• 无需使用 use client 指令：Server Components 不需要客户端状态管理，因此不需要 useState、useEffect 等 React 客户端钩子。
• 不支持浏览器特性：由于它们在服务器上渲染，所以不能直接使用浏览器特性，如 window 对象或 document 对象。
• 更快的初次加载：Server Components 可以提前渲染好 HTML，这使得初次加载更快，因为客户端不需要等待 JavaScript 加载和执行。
• 更好的 SEO：因为 Server Components 在服务器上渲染，搜索引擎爬虫可以更容易地抓取和索引内容。

// app/page.tsx (Server Component)
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
    </div>
  );
}

Client Components  

Client Components 是在客户端渲染的组件。它们需要在浏览器上执行 JavaScript 来进行渲染。  

特性：

• 使用 use client 指令：在文件顶部添加 "use client" 指令，标记该组件为 Client Component。
• 支持客户端钩子：可以使用 useState、useEffect 等 React 钩子，因为它们在客户端渲染。
• 访问浏览器特性：可以直接使用浏览器 API，如 window 和 document 对象。
• 更大的 JavaScript 包：由于需要将 JavaScript 文件发送到客户端，可能会增加初次加载的时间。

// app/clientComponent.tsx
"use client";
import React, { useState, useEffect } from 'react';
export default function ClientComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

什么时候使用 Server Components 和 Client Components

Server Components：

• 适用于需要进行数据获取、渲染静态内容、提高 SEO 性能的情况。
• 适合不需要客户端交互和状态管理的页面。
• 例如，博客文章页面、产品详情页面等。

Client Components：

• 适用于需要客户端交互的组件，如动态表单、聊天应用、实时更新等。
• 适合需要使用客户端状态或浏览器 API 的组件。
• 例如，用户输入表单、交互式图表等。

两者有可以结合使用

有时，一个页面可能需要结合使用 Server Components 和 Client Components。例如，一个用户个人信息页面可以用 Server Component 来加载用户数据，而用 Client Component 来处理用户交互。  

// app/user/page.tsx (Server Component)
import ClientComponent from './ClientComponent';
export default function UserPage() {
  return (
    <div>
      <h1>User Profile</h1>
      <ClientComponent />
    </div>
  );
}

最后

• Server Components 在服务端渲染，提高初次加载速度和 SEO，但不能使用客户端特性。
• Client Components 在客户端渲染，支持状态管理和浏览器特性，但增加了初次加载的 JavaScript 包的体积。