1# RSC Boundaries
2 
3Detect and prevent invalid patterns when crossing Server/Client component boundaries.
4 
5## Detection Rules
6 
7### 1. Async Client Components Are Invalid
8 
9Client components **cannot** be async functions. Only Server Components can be async.
10 
11**Detect:** File has `'use client'` AND component is `async function` or returns `Promise`
12 
13```tsx
14// Bad: async client component
15'use client'
16export default async function UserProfile() {
17  const user = await getUser() // Cannot await in client component
18  return <div>{user.name}</div>
19}
20 
21// Good: Remove async, fetch data in parent server component
22// page.tsx (server component - no 'use client')
23export default async function Page() {
24  const user = await getUser()
25  return <UserProfile user={user} />
26}
27 
28// UserProfile.tsx (client component)
29'use client'
30export function UserProfile({ user }: { user: User }) {
31  return <div>{user.name}</div>
32}
33```
34 
35```tsx
36// Bad: async arrow function client component
37'use client'
38const Dashboard = async () => {
39  const data = await fetchDashboard()
40  return <div>{data}</div>
41}
42 
43// Good: Fetch in server component, pass data down
44```
45 
46### 2. Non-Serializable Props to Client Components
47 
48Props passed from Server → Client must be JSON-serializable.
49 
50**Detect:** Server component passes these to a client component:
51- Functions (except Server Actions with `'use server'`)
52- `Date` objects
53- `Map`, `Set`, `WeakMap`, `WeakSet`
54- Class instances
55- `Symbol` (unless globally registered)
56- Circular references
57 
58```tsx
59// Bad: Function prop
60// page.tsx (server)
61export default function Page() {
62  const handleClick = () => console.log('clicked')
63  return <ClientButton onClick={handleClick} />
64}
65 
66// Good: Define function inside client component
67// ClientButton.tsx
68'use client'
69export function ClientButton() {
70  const handleClick = () => console.log('clicked')
71  return <button onClick={handleClick}>Click</button>
72}
73```
74 
75```tsx
76// Bad: Date object (silently becomes string, then crashes)
77// page.tsx (server)
78export default async function Page() {
79  const post = await getPost()
80  return <PostCard createdAt={post.createdAt} /> // Date object
81}
82 
83// PostCard.tsx (client) - will crash on .getFullYear()
84'use client'
85export function PostCard({ createdAt }: { createdAt: Date }) {
86  return <span>{createdAt.getFullYear()}</span> // Runtime error!
87}
88 
89// Good: Serialize to string on server
90// page.tsx (server)
91export default async function Page() {
92  const post = await getPost()
93  return <PostCard createdAt={post.createdAt.toISOString()} />
94}
95 
96// PostCard.tsx (client)
97'use client'
98export function PostCard({ createdAt }: { createdAt: string }) {
99  const date = new Date(createdAt)
100  return <span>{date.getFullYear()}</span>
101}
102```
103 
104```tsx
105// Bad: Class instance
106const user = new UserModel(data)
107<ClientProfile user={user} /> // Methods will be stripped
108 
109// Good: Pass plain object
110const user = await getUser()
111<ClientProfile user={{ id: user.id, name: user.name }} />
112```
113 
114```tsx
115// Bad: Map/Set
116<ClientComponent items={new Map([['a', 1]])} />
117 
118// Good: Convert to array/object
119<ClientComponent items={Object.fromEntries(map)} />
120<ClientComponent items={Array.from(set)} />
121```
122 
123### 3. Server Actions Are the Exception
124 
125Functions marked with `'use server'` CAN be passed to client components.
126 
127```tsx
128// Valid: Server Action can be passed
129// actions.ts
130'use server'
131export async function submitForm(formData: FormData) {
132  // server-side logic
133}
134 
135// page.tsx (server)
136import { submitForm } from './actions'
137export default function Page() {
138  return <ClientForm onSubmit={submitForm} /> // OK!
139}
140 
141// ClientForm.tsx (client)
142'use client'
143export function ClientForm({ onSubmit }: { onSubmit: (data: FormData) => Promise<void> }) {
144  return <form action={onSubmit}>...</form>
145}
146```
147 
148## Quick Reference
149 
150| Pattern | Valid? | Fix |
151|---------|--------|-----|
152| `'use client'` + `async function` | No | Fetch in server parent, pass data |
153| Pass `() => {}` to client | No | Define in client or use server action |
154| Pass `new Date()` to client | No | Use `.toISOString()` |
155| Pass `new Map()` to client | No | Convert to object/array |
156| Pass class instance to client | No | Pass plain object |
157| Pass server action to client | Yes | - |
158| Pass `string/number/boolean` | Yes | - |
159| Pass plain object/array | Yes | - |
160