React 服务器组件：演变-js教程-PHP中文网

React Server Components: The Evolution

简介

大约十年前，当我开始软件开发之路时，我只编写了 HTML、CSS、JavaScript 和一些 Python 2 脚本；在那段时间，我们仅依赖 PHP 和 SQL 进行服务器端客户端-服务器通信。之后，下一个层次是神奇的词“反应”，就像对状态或效果的变化做出反应。这是我的理解，没有深入探讨这个问题，有传言说是 Facebook 工程师制作的；这是我们用来编码前端部分的方式的重磅炸弹。

随着软件开发的发展和后端系统变得复杂，React Server Components (RSC) 认为我们的生态系统迫切需要发展。这让我想起了大量 JavaScript 捆绑包和“加载”旋转器无处不在的日子。让我们探索 RSC 如何改变游戏规则。

性能革命

RSC 带来的主要转变不仅是技术上的，而且是哲学上的。 RSC 不需要将整个组件树发送到客户端，而是让我们在服务器上渲染组件，同时保持我们喜欢的 React 交互性。我曾经将仪表板应用程序迁移到 RSC，这非常简单，没有什么特别的，而且仪表板应用程序的大小下降了 60%，效果明显。

这是我最近遇到的一个现实世界的例子：

 // Before: Client Component
 import { ComplexDataGrid } from 'heavy-grid-library';
import { format } from 'date-fns';

export default function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchDashboardData().then(setData);
  }, []);

  return <ComplexDataGrid data={data} />;
}

登录后复制

在这种传统的客户端方法中，发生了几件事：

我们正在导入一个与我们的客户端 JavaScript 捆绑在一起的重型数据网格库。
我们使用 useState 在浏览器中本地管理我们的数据。
我们在组件安装后使用 useEffect 获取数据。
在获取数据时用户会看到加载状态。
所有数据处理都在浏览器中进行，可能会降低用户设备的速度。

现在，让我们看看 RSC 版本：

import { sql } from '@vercel/postgres';
import { DataGrid } from './DataGrid';

export default async function Dashboard() {
  const data = await sql`SELECT * FROM dashboard_metrics`;

  return <DataGrid data={data} />;
}

登录后复制

该组件默认是异步的 - 不需要 useEffect 或 useState。
通过服务器端查询直接访问数据库。
无需客户端数据获取代码。
初始数据需要零加载状态。
数据处理发生在强大的服务器上，而不是用户设备上。
导入的DataGrid组件可以更轻量，因为它只需要处理显示，而不是数据获取。

转变是惊人的。不再有 useEffect，不再有客户端数据获取，最重要的是，不再有不必要的 JavaScript 传送到客户端。

现实世界的好处

影响不仅仅限于性能指标。在使用 RSC 时，我注意到数据库查询现在更靠近数据源（在上面的示例中不是最佳编码实践），组件更简单、更集中，身份验证和授权模式变得更简单，并且 SEO改进几乎是免费的，这在 React 世界中是从未发生过的。

然而，最显着的优势是开发者体验。编写可以直接访问数据库的组件（安全！）感觉就像一种超能力。这就像两全其美：React 基于组件的架构，以及 Next.js 最先进的服务器端渲染的性能优势

权衡

说实话：RSC 并不完美。心智模型需要时间来掌握，尤其是理解客户端/服务器边界；对我来说，这是一种黑匣子中的复杂操作。我将遵循之前的迁移示例，我们遇到了一些与 RSC 不兼容的第三方库的障碍。解决方案是什么？混合方法：

 // Before: Client Component
 import { ComplexDataGrid } from 'heavy-grid-library';
import { format } from 'date-fns';

export default function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchDashboardData().then(setData);
  }, []);

  return <ComplexDataGrid data={data} />;
}

登录后复制

让我们来分解一下这种混合方法中发生的情况：