RSC X-Ray Interactive Demo

Passing non-serializable props from Server to Client components

Serialization Boundary Violation

🔍 What analyzer checks

Analyzer knows 'ClientButton' is a Client Component, so it checks props passed to it

What is it?

This code tries to pass a function from a Server Component to a Client Component

⚠️ Why does it matter?

Server Components run on the server, Client Components run in the browser. Functions cannot be serialized and sent over the network.

How to fix it?

Move the function to the Client Component, or use a serializable prop like a URL for server actions

✨ Pro Features

  • VS Code quick fix: Convert to Server Action
  • Overlay visual boundary tree with component-level violations
  • Automated refactoring with codemod support
Learn More
Passing non-serializable props from Server to Client components