Question about server component and client components

Answered

Cape lion posted this in #help-forum

Cape lionOP

2023-09-01T15:35:32.000Z

Hi all ðŸ˜„ I am new to Next.js
I have <Articles/> which is a server component that fetches articles from the server.
I am importing it inside of <Home/> which is a client component because I have a useEffect inside of it.
I keep getting this error:
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

Can someone help me fix it?:D

Answered by not-milo.tsx

Server components cannot be imported into client components. You can only pass them as props like you would with a context provider.

View full answer

5 Replies

not-milo.tsx

2023-09-01T15:41:42.000Z

Server components cannot be imported into client components. You can only pass them as props like you would with a context provider.

Answer

not-milo.tsx

2023-09-01T15:44:10.000Z

Here you can find a very good visualisation made by Alex Sidorenko on how you can compose client and server components together

https://twitter.com/asidorenko_/status/1694366373240062087?s=20

Also, have a read of this documentation page: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components

Cape lionOP

2023-09-01T16:07:31.000Z

Thank you @not-milo.tsx ðŸ˜„

not-milo.tsx

2023-09-01T16:11:23.000Z

No problem âœŒï¸