面试之《react服务器组件--RSC》

React 服务器组件（React Server Components）是 React 18 引入的一项重要特性，它允许开发者在服务器端渲染 React 组件，为构建高性能、可维护的 React 应用提供了新的方式。下面从多个方面详细介绍 React 服务器组件。

核心概念

• 服务器渲染：传统的 React 应用通常是在客户端渲染（CSR）或使用 Next.js 等框架进行静态站点生成（SSG）和服务器端渲染（SSR）。而 React 服务器组件是一种全新的服务器渲染方式，它可以在服务器上直接渲染组件，生成 HTML 和 JavaScript 代码，然后将渲染好的结果发送到客户端。
• 组件类型划分：在引入服务器组件后，React 组件分为服务器组件和客户端组件。服务器组件只能在服务器端运行，无法访问浏览器的 API（如 window、document 等）；客户端组件则可以在客户端运行，并且可以访问浏览器的 API。

优势

• 性能提升：
  • 减少客户端的 JavaScript 代码量，因为服务器组件在服务器端渲染，不需要将组件的代码发送到客户端。
  • 更快的初始加载速度，用户可以更快地看到渲染好的页面内容。
• 更好的安全性：服务器组件可以直接访问服务器端的资源，如数据库、文件系统等，而不需要通过 API 进行通信，从而减少了潜在的安全风险。
• 简化数据获取：在服务器组件中，可以直接在组件内部获取数据，而不需要使用 useEffect 或其他异步数据获取方法，使代码更加简洁。

基本使用

以下是一个简单的示例，展示了如何在 Next.js 中使用 React 服务器组件：

1. 创建服务器组件

在 Next.js 中，默认的 .js 或 .jsx 文件就是服务器组件。创建一个名为 ServerComponent.js 的文件：

// ServerComponent.js
import React from 'react';

// 模拟从数据库获取数据
async function getData() {
    return ['Item 1', 'Item 2', 'Item 3'];
}

const ServerComponent = async () => {
    const data = await getData();
    return (
        <ul>
            {data.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
};

export default ServerComponent;

2. 在页面中使用服务器组件

创建一个名为 page.js 的页面文件：

// page.js
import React from 'react';
import ServerComponent from './ServerComponent';

const Page = () => {
    return (
        <div>
            <h1>React Server Components Example</h1>
            <ServerComponent />
        </div>
    );
};

export default Page;

与客户端组件交互

服务器组件可以与客户端组件一起使用，通过 props 传递数据。以下是一个示例：

1. 创建客户端组件

创建一个名为 ClientComponent.js 的文件，并在文件顶部添加 "use client" 指令，表明这是一个客户端组件：

// ClientComponent.js
"use client";
import React from 'react';

const ClientComponent = ({ data }) => {
    return (
        <div>
            <h2>Client Component</h2>
            <p>{data}</p>
        </div>
    );
};

export default ClientComponent;

2. 在服务器组件中使用客户端组件

// ServerComponent.js
import React from 'react';
import ClientComponent from './ClientComponent';

const ServerComponent = () => {
    const data = 'Data from server component';
    return (
        <div>
            <h1>Server Component</h1>
            <ClientComponent data={data} />
        </div>
    );
};

export default ServerComponent;

局限性

• 无法访问浏览器 API：服务器组件在服务器端运行，无法直接访问浏览器的 API，如 window、document 等。如果需要使用这些 API，应该使用客户端组件。
• 状态管理受限：服务器组件是无状态的，不支持使用 useState 和 useReducer 等 React 钩子来管理状态。如果需要管理状态，应该使用客户端组件。