Summary
RSC run only on server — zero client bundle for their logic, serializable props to client components. Cannot use hooks, browser APIs, or event handlers in Server Components. Client Components ('use client') form the interactive boundary. Defer to .cursor/rules/project-stack.mdc when present for framework-specific RSC rules. Composition: server fetches, client interacts.
Code example
// Server Component (no 'use client')
async function ProductPage({ id }) {
const product = await db.products.get(id);
return <ProductDetails product={product} />;
}
// Client boundary
'use client';
function AddToCart({ productId }) {
return <button onClick={() => cart.add(productId)}>Add</button>;
}
Key points
- RSC run only on server — zero client bundle for their logic, serializable props to client components.
- Cannot use hooks, browser APIs, or event handlers in Server Components.
- Client Components (
'use client') form the interactive boundary. - Defer to
.cursor/rules/project-stack.mdcwhen present for framework-specific RSC rules. - Composition: server fetches, client interacts.