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 Scan
Black-box review of your public-facing app. No code access needed.
- OWASP Top 10 checks
- SSL/TLS analysis
- Security headers
- Expert review within 24h
Code Audit
In-depth review of your source code for security, quality, and best practices.
- Security vulnerabilities
- Code quality review
- Dependency audit
- AI pattern analysis
Complete Bundle
Both scans in one package with cross-referenced findings.
- Everything in both products
- Cross-referenced findings
- Unified action plan
100% 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.