| name | docs-rsc-sandpack |
| description | Use when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC>, or when modifying the RSC sandpack infrastructure. |
RSC Sandpack Patterns
For general Sandpack conventions (code style, naming, file naming, line highlighting, hidden files, CSS guidelines), see /docs-sandpack. This skill covers only RSC-specific patterns.
Quick Start Template
Minimal single-file <SandpackRSC> example:
<SandpackRSC>
` ` `js src/App.js
export default function App() {
return <h1>Hello from a Server Component!</h1>;
}
` ` `
</SandpackRSC>
How It Differs from <Sandpack>
| Feature | <Sandpack> | <SandpackRSC> |
|---|
| Execution model | All code runs in iframe | Server code runs in Web Worker, client code in iframe |
'use client' directive | Ignored (everything is client) | Required to mark client components |
'use server' directive | Not supported | Marks Server Functions callable from client |
async components | Not supported | Supported (server components can be async) |
| External dependencies | Supported via package.json | Not supported (only React + react-dom) |
| Entry point | App.js with export default | src/App.js with |
