ReactJS ~React Server Components~

Source: Dev.to

概览

React Server Components（RSC）是一种全新类型的 React 组件，仅在服务器上运行，并仅将生成的 UI 结构发送到浏览器。
在传统的 React 中，JavaScript 在浏览器中运行以渲染 UI。使用 RSC 时，处理工作在服务器和客户端之间分担，带来多项优势。

RSC 的关键特性

• 降低浏览器负载 – 渲染在服务器上完成，发送到浏览器的 JavaScript 量显著减少。
• 更快的数据获取 – 服务器直接访问数据库和文件系统，消除不必要的 API 请求往返。
• 提升安全性 – 私钥、API 令牌等机密信息永不传输到浏览器，可在服务器上安全处理。

服务器与客户端的角色划分

React 将使用两种不同的组件类型：

Server Component

• 执行位置： 服务器
• 主要用途： 数据获取、数据库访问、使用大型库。

Client Component

• 执行位置： 浏览器
• 主要用途： 交互操作（点击、表单输入），使用 useState 等客户端 Hook。

与 SSR 的区别

• SSR（服务器端渲染）： 服务器生成整个页面的初始 HTML 标记。
• RSC（React 服务器组件）： 组件仅在服务器上运行。与 SSR 结合使用时，可实现更快、更高效的网站构建。