[react] server component

RSC[1] 像是补齐 Modern React 的一块拼图

Pros

  • 如上图,RSC可以把请求放在 server端,这样弊端:增加了server端的负载,好处:避免请求时 sensitive api & secrets 泄漏、first-paint理论上会更快
  • 针对特定的场景,RSC有大益处,如文章中提到的 syntaxhighlight,现阶段几乎没发现 bundle size 小,又能支持编程语言全的 libJS。毕竟是静态渲染,特别适合放在服务端
  • 介于 SSR 、SSG 之间,利于 SEO
所以,适合静态渲染无交互的组件,如统计图表、格式化等

Cons

  • browser api & Hooks 等均不能使用
  • use client 声明的组件的子组件均被当作Client Components;目前貌似组合组件可以绕过。
"use client"
function Client() {
return (<>
<RSC_as_client />
</>);
}

function CompoundComp() {
return (<Client>
<Still_be_RSC />
</Client>);
}

Date:
Words:
267
Time to read:
1 min