用途:在 React 文档中添加交互式 RSC(React 服务器组件)代码示例时使用 <SandpackRSC>,或修改 RSC Sandpack 基础设施。通用 Sandpack 约定(代码风格、命名、文件命名、行高亮、隐藏文件、CSS 规范)见 /docs-sandpack,本技能只涉及 RSC 专用模式。
主要能力与差异:与 <Sandpack> 相比,<SandpackRSC> 的服务器代码在 Web Worker 中运行、客户端代码在 iframe 中运行;必须用 'use client' 标记客户端组件,'use server' 标记可从客户端调用的 Server Functions;支持 async 服务器组件;不支持外部依赖(仅 react 与 react-dom,不要包含 package.json);入口点为 src/App.js 且需 export default(src/app.js 也可)。文件按顶部指令分类:无指令默认在 Web Worker(服务器)运行,可 async、可导入其他服务器文件,不能用 hooks、事件处理器或浏览器 API;'use client' 必须是首条语句,可用 hooks/事件/浏览器 API,不能 async,不能导入服务器文件;'use server' 在 Web Worker 运行,标记 Server Functions,可从客户端通过 props 或 form action 调用。
常见模式:服务器与客户端组件组合、带 Suspense 的 async 服务器组件、Server Functions(Actions)。
必备用法:入口 src/App.js;不要手写自动注入的基础设施文件(如 /src/index.js、/src/rsc-client.js、/src/rsc-server.js、/node_modules/webpack_shim/index.js、/node_modules/rsdw_client/index.js)。修改 rsc-server.js 或 webpack-shim.js 后运行 node scripts/buildRscWorker.mjs 重建 worker bundle,再用 yarn dev 测试。
限制:不支持外部 npm 包;模板文件通过 !raw-loader 以原始字符串加载。建筑架构、关键源文件与构建细节见原始资料。