Fix server component and client component boundary errors
Server Component errors arise when you mix server and client paradigms incorrectly. Using hooks, event handlers, or browser APIs in Server Components, or passing non-serializable props across the boundary, triggers these errors.
Error messages you might see
You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client".Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".Why this happens in AI-generated code
Using React hooks in Server Components
AI code generators default to familiar patterns like useState and useEffect without adding the 'use client' directive, which is required for interactive components in the App Router.
Passing functions as props across the boundary
AI-generated parent-child patterns pass callback functions from Server Components to Client Components, but functions aren't serializable across the server/client boundary.
Importing client-only libraries in Server Components
AI tools import browser-dependent libraries (chart libraries, animation libraries) in files without 'use client', causing server-side rendering failures.
How to fix it
Add 'use client' directive to interactive components
Place 'use client' at the top of any file that uses hooks, event handlers, or browser APIs. Keep Server Components as the default and push client boundaries down.
Restructure the component boundary
Instead of passing functions across boundaries, use Server Actions with 'use server' or restructure so the Client Component owns its own logic.
Get professional help
Still stuck? Our engineers can restructure your component architecture for the App Router. Visit /products to get started.
Can't fix it yourself?
Our code audit identifies this issue and dozens more. Get a prioritized fix list.
Security Review
Automated Security Scan
AI-powered analysis of your codebase. Get a detailed report with prioritized findings within 24 hours.
Get StartedSecurity Review
Manual Security Review
Expert engineer works on your project directly. Fixed scope, fixed price, no surprises.
Get a QuoteSecurity Review
Full Pentest
Enterprise-grade engagement tailored to your needs. Dedicated engineer, ongoing support.
Fix Bugs
Code Audit
AI-powered analysis of your codebase. Get a detailed report with prioritized findings within 24 hours.
Get StartedFix Bugs
Bug Fixing
Expert engineer works on your project directly. Fixed scope, fixed price, no surprises.
Get a QuoteFix Bugs
Ongoing Support
Enterprise-grade engagement tailored to your needs. Dedicated engineer, ongoing support.
Refactor Code
Code Audit
AI-powered analysis of your codebase. Get a detailed report with prioritized findings within 24 hours.
Get StartedRefactor Code
Refactoring
Expert engineer works on your project directly. Fixed scope, fixed price, no surprises.
Get a QuoteRefactor Code
Full Rewrite
Enterprise-grade engagement tailored to your needs. Dedicated engineer, ongoing support.
100% of your audit purchase is credited toward any paid service. Start with an audit, then let us fix what we find.
Frequently asked questions
Should I add 'use client' to every component?
No. Server Components are more performant - they send zero JavaScript to the client. Only add 'use client' to components that genuinely need interactivity, state, or browser APIs.
Can a Server Component be a child of a Client Component?
Yes, but only if passed as children or a prop. You cannot import a Server Component directly into a Client Component file - instead, pass it through composition.
Related resources
Related Technologies
Still stuck? We can fix it for you.
Send us your repo. We'll diagnose the issue and give you a fixed quote within 24 hours.