RSC技术文档

RSC 理念

介绍

React 组件的可能的状态：前端交互（RCC，React Client Component，如：按钮的隐藏或出现），后端请求（RSC，React Server Component，如：数据获取与消费）

function App() {
  const [data, update] = useState(null);

  useEffect(() => {
    fetch(url).then((res) => update(res.json()));
  }, []);

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

function App() {
  // 从数据库获取数据
  const data = getDataFromDB();
  return <Ctn data={data} />;
}

RSC 的理念：根据状态类型，划分组件类型，RCC 在前端运行，RSC 在后端运行。

特点

• 带有 .server.js(x) 后缀的文件导出的是 RSC
• 带有 .client.js(x) 后缀的文件导出的是 RCC
• 没有带 server 或 client 后缀的文件导出的是通用组件
• RCC 中是不允许 import RSC 的

对比

RSC 与 SSR，CSR

• SSR：Server Side Render 服务端渲染，通过服务端渲染生成，传回 HTML，浏览器直接显示
• CSR：Client Side Render 客户端渲染

SSR 传回客户端的是纯的 HTML，在经过 JS 加载，成为了客户端的应用程序，除了首页的纯 HTML，所有组件仍属于客户端。

RSC 始终在服务端，同时以组件的形式存在，结合数据消费进行展现。

对于 SEO 来说，SSR 更容易搜索以及爬取，而 RSC 并不是 SEO 的最优选择。

RSC 与 SSG

• SSG：Static Site Generation 页面静态化

SSG：在构建的时候直接把结果页面输出 html 到磁盘，每次访问直接把 html 返回给客户端，相当于一个静态资源，SSG 易搜索以及爬取。

RSC：服务端组件渲染，动态渲染。

RSC 协议

RSC 看作一种 rpc（Remote Procedure Call，远程过程调用）协议的实现。数据传输的两端分别是「React 后端运行时」与「React 前端运行时」。

import ClientCpn from './ClientCpn.client'
import ServerCpn from './ServerCpn.server'
export default function OuterServerCpn() {
  return (
    <ClientCpn>
      <ServerCpn />
    </ClientCpn>
  )
}

// ClientCpn.client.jsx
export default function({children}) {
  return <div>{children}</div>;
}

// ServerCpn.server.jsx
export default function() {
  return <div>服务端组件</div>;
}

M1:{"id":"./src/ClientCpn.client.js","chunks":["client1"],"name":""}
J0:["$","div",null,{"className":"main","children":["$","@1",null,{"children":["$","div",null,{"children":"服务端组件"}]}]}]

数据的序列化与反序列化

//[标记]代表这行的数据类型，比如J代表「组件树」，M代表「一个RCC的引用」，S代表Suspense
//id代表这行数据对应的id。
//JSON数据保存了这行具体的数据。

[
  "$",
  "div",
  null,
  {
    "className": "main",
    "children": [
      "$",
      "@1",
      null,
      {
        "children": [
          "$",
          "div",
          null,
          {
            "children": "服务端组件"
          }
        ]
      }
    ]
  }
]

ID 映射

// @1 :引用id为1的RCC数据
// M1 ：M为RCC类型组件，id为1

"children":[
  "$","@1",null,
  {
    "children":[
      "$","div",null,{
        "children":"服务端组件"
      }
    ]
  }
]

//引用
M1:{
  "id":"./src/ClientCpn.client.js",
  "chunks":["client1"],
  "name":""
}

传输协议

「RSC 协议」直接基于「HTTP 协议」实现，其 Content-Type 为 text/x-component。

使用场景

• 应用程序小且简单
• 不会运行前端服务器，存在少或不用数据的应用，静态应用

SEO

搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

SEO 的工作原理：网页在被请求的时候，从服务器发出的内容可以被搜索引擎的爬虫爬到数据，这个时候从搜索引擎搜索的关键字包含在这些内容中，那么这个网址的信息就更容易显示在搜索结果中。