Non-serializable props from a Server to a Client Component
Why it matters
Props crossing the server→client boundary are serialized by React Flight. Functions (other than Server Actions), class instances and event handlers cannot be serialized; the render throws at runtime.
Fix
Pass plain data, make the function a Server Action ("use server"), or move the handler into the Client Component.
Credit
From the React team
Props passed from a Server to a Client Component must be serializable; functions are only allowed as Server Actions marked 'use server'.
References
- 'use client' directiveReact
- 'use server' directiveReact
- Server and Client ComponentsNext.js
- next-best-practices: RSC boundariesVercel (vercel-labs/next-skills)