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>);
}