关于React Server组件的一切

在构建应用程序时，最好的开发人员可以完成三件事：出色的用户体验，随时间推移的可伸缩性和快速的性能。

项目经常牺牲其中一个来实现另外两个。 React Server Components于2020年底宣布，将通过启用更多功能同时减少可在客户端上评估的JavaScript数量来帮助减少折衷。由于性能更快，这将为用户和开发人员带来更愉快的体验。

概括而言，React Server组件是可以在服务器和客户端上呈现的组件。这使开发人员可以构建跨应用程序两侧的应用程序，以便该应用程序可以提供最佳体验。

通过在服务器上执行数据获取，React Server Components将改变开发人员构建React应用程序的方式。由于服务器代码永远不会作为捆绑包发送到客户端，因此与应用程序进行交互所花费的时间更快。

这创建了一个环境，在该环境中，我们使用客户端来优化交互性，并使用服务器来进一步优化性能。

React Server Components的灵感来自其他技术，包括PHP，Ruby on Rails和GraphQL。但是，React Server组件使开发人员可以更好地控制向客户端发送或不发送的内容，从而具有更大的灵活性。

服务器端渲染（SSR）是获取应用程序并将其渲染为服务器上的HTML和CSS的过程。这为用户（尤其是互联网连接速度较慢或设备较旧的用户）创建了更快的加载时间。但是，在初始HTML加载之后，开发人员仍然要付出下载，解析和执行这些组件的费用。

React Server组件是不同的，但却是SSR的补充。 SSR与呈现HTML元素的初始页面加载有关。初始页面加载后，仍在客户端使用的React仍在运行相同数量的JavaScript。另一方面，每次发出网络请求时，React Server组件都需要从服务器重新渲染。这使React能够智能地将新数据与现有客户端组件合并，从而使客户端永远不会丢失其状态。

Next.js将React Server Components与SSR相结合，以简化初始呈现为HTML的过程，从而加快了页面的非交互式显示。由于客户端上的JavaScript最少，因此用户能够与网站交互所花费的时间也得到了改善。

Next.js团队创建了一个React Server Components演示，以便您可以较早地了解React Server Components如何在Next.js中工作。

在此视频中，李·罗宾逊（Lee Robinson）定义了React Server组件，并演示了Next.js和Vercel如何与它们一起工作。源代码可在GitHub上获得。

React Server组件仍处于RFC阶段。与所有新功能一样，随着更多研究的完成，React Server组件将不断发展和变化。在此处查找有关React Server组件如何与Next.js集成的更新。

Vercel的Next.js团队与Facebook的React团队紧密合作。 React Server组件即将推出。当更多信息可用时，我们将更新此页面。

有关React Server Components的历史和演示的更多信息，请观看Dan Abramov和Lauren Tan的这段视频。