Serializable props only
Server-to-client props must survive JSON: no functions or classes.
React docsreact.dev
Reference for 'use server': marks a function as a Server Action, which can be passed to Client Components.
From next-best-practices, rsc-boundaries.md.
Send a value across
Pick a value, then tick Apply the fix.
RSC payload
- Received
- Result
Valid, or fix needed?
Drag each value into a bin, or select one and press a bin.
The onClick trap
Load the bad page, then try both fixes.
Handler from serverBad
// page.tsx (server)
const handleClick = () => console.log('clicked')
return <ClientButton onClick={handleClick} />onClick={handleClick}Client-side or ActionGood
Likes: 0
'use client'Why it matters, pros and cons
Why it matters
Props ship as data, so functions and prototypes are lost on the way.
Pros
- Prop types match what actually arrives.
- Smaller payloads, no leaked server columns.
- Same shape works for caches and actions.
Cons
- React 19 payloads do carry Date, Map and Set.
- A Server Action is a public POST endpoint.
- Client-side Date formatting can cause hydration mismatches.