RSC 服务端组件示例

React Server Components - 只运行在服务端的组件

🖥️ 服务端环境信息

NODE_ENV: production

API_KEY 存在: ❌ 否

服务端时间: 2026/4/1 18:48:01

✅ 环境变量只在服务端可访问,不会泄露到客户端

🗄️ 数据库数据(服务端查询)

查询时间:2026/4/1 18:48:02

  • 张三zhangsan@example.com
  • 李四lisi@example.com
  • 王五wangwu@example.com

✅ 这段数据库查询代码不会出现在客户端 bundle 中

📁 本地文件读取(服务端)

项目名称:homehub

版本:0.1.0

可用脚本:

devbuildstartlint

✅ fs 模块只在服务端执行,客户端无法访问文件系统

🖱️ 客户端交互组件

0

✅ 只有客户端组件才能使用 useState,查看页面源码看不到这个组件的逻辑

服务端组件 vs 客户端组件

服务端组件 ✅

  • • 直接访问数据库
  • • 读取本地文件
  • • 访问服务端 API
  • • 使用环境变量
  • • bundle 体积更小

客户端组件

  • • useState / useEffect
  • • 事件监听器
  • • 浏览器 API
  • • DOM 操作
  • • 第三方 UI 库