Nextjs Server Components

Composition Patterns

• Server-in-Client: You cannot import a Server Component directly into a Client Component.
  • Fix: Pass Server Component as children prop to the Client Component.

// ClientWrapper.tsx
'use client';
export default function ClientWrapper({ children }) {
  return <div>{children}</div>;
}

// Page.tsx (Server)
<ClientWrapper>
  <ServerComponent />
</ClientWrapper>;

Anti-Patterns

• Poisoning: Importing server-only secrets into Client Components (Use server-only package to prevent).
• Over-fetching: Passing large data props to Client Components (Serialization cost). Only pass IDs if possible.