react父组件获取服务端数据_译 | 什么是React服务端组件？

在2020年底，React团队分享给我们即将更新的新特性，称之为React 服务端组件(React Server Components)。目前这个特性仍然在研究和开发，还不会马上投入到生产中，但我们仍然可以提前玩耍起来，你可以在这里找到他们分享的演讲和案例。

React 服务端组件是执行在服务端的一个普通的React组件(会有一些限制，比如，他们不能使用state和effects)，它解决的痛点是尝试着去改善服务端组件的性能和优化数据的抓取。

你可能会问这个和服务端渲染(SSR)有什么区别？实际上它们是相互补充的。SSR生成HTML，但是我们仍然需要下载所有的Javascript代码。服务端组件使用不同的格式，这种格式会被随即转换成HTML。这种格式允许我们重新抓取我们的的组件。客户端组件的状态(常规组件)会在重新获取时保留。

关于性能

几乎每个React应用都会使用一些第三方的包，导致最后打包的尺寸增加，还会降低应用的性能。当然通过一些方法可以改善这些客户端问题：我们可以在内部引入这些第三方包的一部分，或者我们自己造轮子实现对应的功能，但这会花费很多时间。

服务端组件允许我们在服务端引入第三方库，不增加我们应用的打包大小。所以我们可以认为服务端组件是一个零大小打包组件(Zero-Bundle-Size Components)。无交互组件和只渲染静态内容的组件可以容易的迁移到服务端。

关于数据获取

另一个好处是服务端组件可以完全访问后端。我们都知道，端的设计并不总是以UI为中心，我们必须在客户端做一些额外的处理。使用服务端组件我们可以把复杂的逻辑放到服务端(也可以通过后端访问的方式去减少)，让我们的客户端更干净。

我们能提到很多其他好处，类似于自动的代码分割，UX的改善等等。但是我推荐你读一下RFC详解。现在让我们看一个例子，更好的理解这些组件是如何工作的。

在开始之前..

这里会介绍两个除了服务端组件之外的新概念。我们常规React组件被称为客户端组件，但也不妨碍我们如何定义它。一些组件不使用state、effects或者后端的资源，他们只是转化一些数据，我们称它们为共享组件。

按照惯例我们会有个后缀去显示他们的类型：

• Component.client.js (or .jsx, .tsx) — 客户端组件

• Component.server.js — 服务端组件

• Component.js — 共享组件

共享组件，顾名思义，客户端和服务器端都可以导入。服务端组件可以导入服务端或者客户端组件，但是客户端组件不能导入服务端组件。

如何把组件迁移到服务端？

比方说我们有一个类似下面的组件：

// Article.jsimport { fetch } from 'react-fetch';import { format } from 'date-fns';import ArticleHeader from './ArticleHeader';import ArticleDeatails from './ArticleDetails';export default function Article({ artileId }) => {  const article = fetch(`my-api/articles/${articleId}`);  const postedAt = format(article.created_at, 'mm/dd/yy');  return (    <>                >  );}

我们可以看到它从我们的API中抓取了当前的文章的内容，然后使用了第三方库格式化了文章的日期，然后渲染了这两个组件(header和details)。我们能把Article部分移到服务端，因为它没有任何的交互，他只读取一些数据并转换渲染到两个其他组件上。我们现在可以忽视其它两个组件，假设我们把它们保留在客户端上。我们知道服务端组件仍然可以导入它们。所以这个案例中，我们唯一要做的事情就是给他们添加server和client的后缀。

// Article.server.jsimport { fetch } from 'react-fetch';import { format } from 'date-fns';import ArticleHeader from './ArticleHeader.client';import ArticleDeatails from './ArticleDetails.client';export default function Article({ artileId }) => {  const article = fetch(`my-api/articles/${articleId}`);  const postedAt = format(article.created_at, 'mm/dd/yy');  return (    <>                >  );}

是不是很容易？当然应用中可能有更复杂的组件，我们需要考虑充分利用服务端组件的优势更好的构造它们。我们可以结合服务端组件和SSR让应用有更好的性能。这一个令人兴奋的特性，会带给我们很多的好处，但最重要的是为我们的用户带来好处。

原文：

https://medium.com/dailyjs/how-react-server-components-work-c8b69595e29f

相关连接

Demohttps://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

RFC:https://github.com/josephsavona/rfcs/blob/server-components/text/0000-server-components.md