Next.js 实战教程：从零开始使用 RSC 构建 Server Components

2.1 RSC 的基本结构#

RSC 的核心在于 组件的类型区分：一种是 Client Component（客户端组件），另一种是 Server Component（服务器端组件）。两者的主要区别在于它们的运行环境：

• Client Component：需要在浏览器中执行，包含交互逻辑、事件监听等。
• Server Component：仅在服务器端运行，负责渲染静态内容或生成数据，不包含任何客户端逻辑。 在 Next.js 中，RSC 的默认行为是 自动识别组件类型。如果某个组件没有依赖于浏览器 API 或客户端特定的功能，它就会被自动识别为 Server Component。

2.2 RSC 的工作原理#

当 Next.js 处理请求时，它会首先渲染 Server Components，然后将其结果作为 HTML 呈现给客户端。之后，Client Components 会在客户端被加载和执行，完成交互逻辑。这种方式减少了客户端的 JavaScript 执行负担，提高了页面的响应速度。 RSC 还支持 异步数据获取，这意味着服务器可以在渲染前获取必要的数据，确保页面在首次加载时已经具备完整的内容。这与传统 SSR 的做法类似，但 RSC 更加灵活，因为数据获取可以嵌入到组件中，而不必依赖全局的 getServerSideProps 或 getStaticProps。

2.3 RSC 的优势#

RSC 的主要优势包括：

• 更快的页面加载速度：由于部分组件在服务器端渲染，客户端无需下载和执行大量代码。
• 更好的 SEO 支持：服务器端渲染的内容更容易被搜索引擎抓取和索引。
• 更低的客户端资源消耗：减少客户端 JavaScript 的执行时间和内存占用。 RSC 为 Next.js 提供了更高效的架构选择，同时也为开发者提供了更清晰的代码组织方式。接下来我们将探讨 RSC 的架构设计特点，帮助读者更好地理解其内部机制。

3.1 组件分层设计#

RSC 的架构设计强调 组件的分层，即 Server Components 与 Client Components 的分离。这种设计有助于优化性能、提高代码可维护性，并简化开发流程。

• Server Components：负责渲染静态内容、数据获取和业务逻辑，不包含任何客户端特定的代码或依赖。
• Client Components：专注于交互逻辑、动画效果和用户操作，通常需要在浏览器中运行。 通过这种分层设计，开发者可以更清晰地划分职责，使得每个组件只关注自己的功能，避免了不必要的复杂性和耦合。

3.2 数据流与状态管理#

在 RSC 架构中，数据流是从服务器到客户端的单向流动。Server Components 在服务器端获取数据，并将其传递给 Client Components。这种模式类似于传统的 SSR 逻辑，但 RSC 的数据获取更加灵活，可以直接嵌入到组件中，而不需要依赖全局的 getServerSideProps 或 getStaticProps。 此外，RSC 的状态管理也更加模块化。由于 Server Components 不涉及客户端状态，它们通常用于处理一次性数据，而 Client Components 则负责管理动态状态。这种设计使得状态管理更加清晰，减少了潜在的错误。

3.3 异步数据获取#

RSC 支持 异步数据获取，这意味着 Server Components 可以在渲染前获取所需的数据。例如，你可以在一个 Server Component 中使用 fetch() 来从后端接口获取数据，然后将其传递给 Client Components 使用。

1
export default async function ServerComponent() {
2
  const data = await fetch('https://api.example.com/data').then(res => res.json());
3
  return <ClientComponent data={data} />;
4
}

这种方式使得数据获取更加灵活，同时也提升了页面的加载速度。

3.4 性能优化#

RSC 的架构设计本身就具有一定的性能优化能力。由于 Server Components 不需要在客户端执行，它们减少了客户端的 JavaScript 执行时间和内存占用。此外，RSC 的 懒加载机制 也可以进一步提升性能，只有在需要的时候才会加载相关的组件。 RSC 的架构设计为 Next.js 提供了更高效的开发方式，同时也为开发者提供了更清晰的代码结构。接下来我们将介绍如何在 Next.js 中搭建 RSC 的开发环境。

4.1 安装 Next.js 项目#

首先，确保你已经安装了 Node.js 和 npm。然后，使用以下命令创建一个新的 Next.js 项目：

1
npx create-next-app@latest my-rsc-project

在提示中选择 TypeScript 和 App Router，因为 RSC 主要与 App Router 配合使用。如果选择 Pages Router，则可能无法完全支持 RSC。

4.2 配置 TypeScript#

Next.js 13 及以上版本默认支持 TypeScript，如果你选择了 TypeScript，那么项目已经包含了 tsconfig.json 文件。如果没有，可以手动添加：

1
{
2
  "compilerOptions": {
3
    "target": "es5",
4
    "module": "esnext",
5
    "lib": ["dom", "es2021"],
6
    "strict": true,
7
    "esModuleInterop": true,
8
    "skipLibCheck": true,
9
    "outDir": "./dist"
10
  },
11
  "include": ["./src"]
12
}

4.3 安装 RSC 依赖项#

Next.js 13 及以上版本已经内置了对 RSC 的支持，因此无需额外安装。但是，为了确保一切正常，建议检查 package.json 中是否包含以下依赖项：

1
"dependencies": {
2
  "next": "^13.0.0",
3
  "react": "^18.0.0",
4
  "react-dom": "^18.0.0"
5
}

如果你使用的是较旧的 Next.js 版本，可以通过以下命令升级：

1
npm install next@latest react@latest react-dom@latest

4.4 创建 RSC 文件#

在 Next.js 中，RSC 默认使用 .server.jsx 或 .server.tsx 扩展名。你可以在 app/ 目录下创建一个新的文件，例如 app/page.server.tsx，并在其中编写 RSC 代码：

1
export default function Page() {
2
  return <h1>This is a Server Component</h1>;
3
}

4.5 配置路由#

在 Next.js 的 App Router 中，app/page.server.tsx 会被视为默认的主页。你可以通过访问 http://localhost:3000 来查看你的 RSC 页面。

4.6 本地测试#

启动开发服务器，确保一切正常：

1
npm run dev

打开浏览器，访问 http://localhost:3000，你应该能看到 “This is a Server Component” 的标题，说明 RSC 已经成功配置。 通过以上步骤，你已经成功搭建了 RSC 的开发环境。接下来，我们将介绍如何构建第一个 Server Component 实例。

5.1 创建 Server Component 文件#

在 app/ 目录下创建一个新的文件，例如 app/server-component.tsx，并设置其为 Server Component：

1
import { useState } from 'react';
2
export default function ServerComponent() {
3
  // 此组件将在服务器端渲染
4
  return (
5
    <div>
6
      <h1>这是 Server Component</h1>
7
      <p>此组件不会在客户端执行。</p>
8
    </div>
9
  );
10
}

注意：这个组件并没有使用任何客户端特定的代码，比如 useEffect 或 useState，所以它会被自动识别为 Server Component。

5.2 在页面中使用 Server Component#

接下来，在 app/page.tsx 中引入并使用这个 Server Component：

1
import ServerComponent from './server-component.server';
2
export default function Home() {
3
  return (
4
    <div>
5
      <h1>欢迎来到我的 Next.js 项目</h1>
6
      <ServerComponent />
7
    </div>
8
  );
9
}

5.3 查看结果#

运行开发服务器：

1
npm run dev

然后访问 http://localhost:3000，你应该能看到页面上显示 “欢迎来到我的 Next.js 项目”，以及 “这是 Server Component” 的内容。

5.4 添加异步数据获取#

RSC 支持异步数据获取，这意味着你可以在 Server Component 中使用 fetch() 获取数据。例如，我们可以从一个假的 API 获取数据，并将其展示出来：

1
import { useEffect, useState } from 'react';
2
export default async function ServerComponent() {
3
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
4
  const data = await response.json();
5
  return (
6
    <div>
7
      <h1>这是 Server Component</h1>
8
      <ul>
9
        {data.map(item => (
10
          <li key={item.id}>{item.title}</li>
11
        ))}
12
      </ul>
13
    </div>
14
  );
15
}

5.5 限制与注意事项#

需要注意的是，Server Components 不能包含客户端逻辑，例如：

• useEffect
• useState
• 任何浏览器 API（如 window 或 document） 如果你尝试在 Server Component 中使用这些内容，Next.js 会抛出错误。 通过以上步骤，你已经成功构建了一个简单的 Server Component 实例。接下来，我们将探讨如何在 RSC 中实现数据获取与状态管理。

6.1 异步数据获取#

RSC 支持 异步数据获取，这意味着你可以直接在 Server Component 中使用 fetch() 或其他异步函数获取数据。这种方法比传统的 getServerSideProps 更加灵活，因为它可以直接嵌入到组件中，而不是依赖于外部的全局函数。

1
export default async function ServerComponent() {
2
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
3
  const data = await response.json();
4
  return (
5
    <div>
6
      <h1>这是 Server Component</h1>
7
      <ul>
8
        {data.map(item => (
9
          <li key={item.id}>{item.title}</li>
10
        ))}
11
      </ul>
12
    </div>
13
  );
14
}

6.2 状态管理#

在 RSC 中，状态管理 主要由 Client Components 负责。由于 Server Components 不包含任何客户端逻辑，它们通常用于处理一次性数据或静态内容。相比之下，Client Components 适合管理动态状态，例如表单输入、用户交互等。

1
import { useState } from 'react';
2
export default function ClientComponent({ data }) {
3
  const [searchTerm, setSearchTerm] = useState('');
4
  const filteredData = data.filter(item =>
5
    item.title.toLowerCase().includes(searchTerm.toLowerCase())
6
  );
7
  return (
8
    <div>
9
      <input
10
        type="text"
11
        placeholder="搜索标题"
12
        value={searchTerm}
13
        onChange={(e) => setSearchTerm(e.target.value)}
14
      />
15
      <ul>
16
        {filteredData.map(item => (
17
          <li key={item.id}>{item.title}</li>
18
        ))}
19
      </ul>
20
    </div>
21
  );
22
}

6.3 数据传递与组件通信#

在 RSC 架构中，数据传递 主要是通过 props 从 Server Component 传递到 Client Component。这种模式类似于传统的 React 组件通信方式，但更加简洁，因为 Server Components 不需要管理状态。

1
export default async function ServerComponent() {
2
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
3
  const data = await response.json();
4
  return <ClientComponent data={data} />;
5
}
6
// app/client-component.tsx
7
export default function ClientComponent({ data }) {
8
  return (
9
    <div>
10
      <h1>这是 Client Component</h1>
11
      <ul>
12
        {data.map(item => (
13
          <li key={item.id}>{item.title}</li>
14
        ))}
15
      </ul>
16
    </div>
17
  );
18
}

6.4 最佳实践建议#

• 避免在 Server Components 中使用客户端逻辑，例如 useEffect 或 useState。
• 将状态管理交给 Client Components，以确保组件的灵活性和可维护性。
• 合理使用异步数据获取，以提高页面性能和用户体验。 通过合理的数据获取和状态管理策略，RSC 能够在保持高性能的同时，提供更灵活的开发体验。接下来我们将探讨 RSC 与 Client Component 的协同开发实践。

7.1 组件间的数据传递#

在 RSC 中，数据从 Server Components 传递到 Client Components 是通过 props 实现的。Server Components 在服务器端获取数据，然后将其作为 props 传递给 Client Components，后者负责渲染和交互。

1
export default async function ServerComponent() {
2
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
3
  const data = await response.json();
4
  return <ClientComponent data={data} />;
5
}
6
// app/client-component.tsx
7
export default function ClientComponent({ data }) {
8
  return (
9
    <div>
10
      <h1>这是 Client Component</h1>
11
      <ul>
12
        {data.map(item => (
13
          <li key={item.id}>{item.title}</li>
14
        ))}
15
      </ul>
16
    </div>
17
  );
18
}

7.2 事件处理与交互逻辑#

Client Components 通常负责处理 用户交互，例如点击按钮、表单提交、动态更新等。这些逻辑不适合放在 Server Components 中，因为它们需要在客户端运行。

1
export default function ClientComponent({ data }) {
2
  const [searchTerm, setSearchTerm] = useState('');
3
  const filteredData = data.filter(item =>
4
    item.title.toLowerCase().includes(searchTerm.toLowerCase())
5
  );
6
  return (
7
    <div>
8
      <input
9
        type="text"
10
        placeholder="搜索标题"
11
        value={searchTerm}
12
        onChange={(e) => setSearchTerm(e.target.value)}
13
      />
14
      <ul>
15
        {filteredData.map(item => (
16
          <li key={item.id}>{item.title}</li>
17
        ))}
18
      </ul>
19
    </div>
20
  );
21
}

7.3 分层架构的优势#

将 Server Components 和 Client Components 分离，不仅可以提高性能，还能使代码结构更加清晰。Server Components 负责数据获取和静态渲染，Client Components 负责交互逻辑和动态内容。这种分层架构有助于提高代码的可维护性和可扩展性。

7.4 代码组织建议#

为了更好地组织代码，建议遵循以下原则：

• 明确区分 Server Components 和 Client Components，避免混淆。
• 尽量减少 Server Components 与 Client Components 之间的依赖，以提高组件的独立性。
• 合理使用 props 传递数据，避免不必要的数据重复或冗余。 通过合理的设计和实现，RSC 与 Client Components 的协同开发能够充分发挥各自的优势，为用户提供更高效、更流畅的体验。

8.1 减少客户端组件数量#

由于 RSC 的本质是将部分组件在服务器端渲染，因此应尽可能多地将组件定义为 Server Components。这样做可以减少客户端 JavaScript 的执行时间和内存占用，从而提升页面加载速度。

1
export default function ServerCard({ title, content }) {
2
  return (
3
    <div className="card">
4
      <h2>{title}</h2>
5
      <p>{content}</p>
6
    </div>
7
  );
8
}
9
// app/server-components/server-list.server.tsx
10
export default async function ServerList() {
11
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12
  const data = await response.json();
13
  return (
14
    <div>
15
      {data.map(item => (
16
        <ServerCard key={item.id} title={item.title} content={item.body} />
17
      ))}
18
    </div>
19
  );
20
}

8.2 合理使用缓存机制#

RSC 的数据获取通常采用异步方式，因此可以利用 缓存机制 来提高数据获取的效率。Next.js 提供了 cache 属性，用于控制数据的缓存策略。

1
export default async function ServerData() {
2
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
3
    cache: 'no-store'
4
  });
5
  const data = await response.json();
6
  return <div>{data.length} 个帖子</div>;
7
}

8.3 优化组件结构#

良好的组件结构设计也能有效提升性能。建议遵循以下几点：

• 避免过度拆分组件：过多的组件可能会导致不必要的重渲染。
• 合理使用 key 属性：在列表渲染中使用 key 可以提高虚拟 DOM 的更新效率。
• 减少不必要的 props 传递：只传递真正需要的数据，避免数据冗余。

8.4 使用懒加载机制#

RSC 支持 懒加载机制，这对于大型应用尤其重要。你可以使用 lazy 函数来延迟加载某些组件，直到它们被需要时才进行渲染。

1
import { lazy } from 'react';
2
const LazyComponent = lazy(() => import('./lazy-component'));
3
export default function ServerComponent() {
4
  return (
5
    <div>
6
      <h1>这是 Server Component</h1>
7
      <LazyComponent />
8
    </div>
9
  );
10
}

8.5 避免在 Server Components 中使用客户端逻辑#

Server Components 不应包含任何客户端特定的代码，例如 useEffect 或 useState。否则，Next.js 会抛出错误。

1
// ❌ 错误示例
2
export default function ServerComponent() {
3
  useEffect(() => {
4
    console.log('This is client logic!');
5
  }, []);
6
  return <div>这是 Server Component</div>;
7
}

## 参考文献#

1. Next.js 官方文档
2. React 官方文档 - Server Components
3. React 18 新特性：Server Components
4. Next.js 13 更新日志
5. MDN Web Docs - Async Functions and await