Skip to main content

Posts

Showing posts with the label React Server Components

Fixing 'Functions cannot be passed directly to Client Components' in Next.js App Router

  You have likely encountered this error while refactoring an application to the Next.js App Router or attempting to pass an event handler from a parent Server Component to a child Client Component: Error:  Functions cannot be passed directly to Client Components unless they are explicitly exposed by "use server". This error acts as a hard stop during development. It highlights a fundamental misunderstanding of the network boundary introduced by React Server Components (RSC). The Root Cause: The Serialization Boundary To understand why this fails, you must understand how Next.js renders your application. Server-Side Rendering:  React renders the Server Components into a special format called the  RSC Payload . This is a JSON-like tree representing your UI. Network Transmission:  This payload is streamed to the browser. Hydration/Reconciliation:  The browser parses the payload and reconciles it with the DOM and Client Components. Because the data flows over ...