Confusion about the "use client" directive.
Answered
Streak-backed Oriole posted this in #help-forum
Streak-backed OrioleOP
I tried to do
Reading the docs, I stumbled upon a bit that said
But, how would I even know if a component is client or server? As a random example, how would I know if
onClick on a button, and was greeted with a message instructing me to make a client instead component. Fair enough.Reading the docs, I stumbled upon a bit that said
Unsupported Pattern: Importing Server Components into Client Components
But, how would I even know if a component is client or server? As a random example, how would I know if
Link is client or server?Answered by Rafael Almeida
how would I even know if a component is client or server? As a random example, how would I know if Link is client or server?you need to check the rendering tree to know if a component is a server component, because a component can be both depending on the type of the component rendering it. as a rule of thumb:
1. if the component has
'use client' at the top, it is a client component2. if the component is async, it is a server component
3. if the component is being rendered by a client component, it will be a client component as well
4. if the component is being rendered by a server component and it is not a client component itself (because of the
'use client' directive) it will be a server component, otherwise it is a client componentLink is a client component because it has the 'use client' directive: https://github.com/vercel/next.js/blob/fd508b086c33413206c413bda6728a709504e965/packages/next/src/client/link.tsx#L111 Replies
Since React 18 all components are server components by default until you explicitly declare it a client component with the
You cannot import server components into client ones, but what you can do is pass a server component as prop to a client components like this for example:
(this is a required pattern if you need to use context providers)
On the last point sometimes you just have to try and see if it errors out. If you know how the component is built then you can guess if it needs the directive or not.
"use client" directive.You cannot import server components into client ones, but what you can do is pass a server component as prop to a client components like this for example:
<ClientComponent>
<ServerComponent></ServerComponent>
</ClientComponent>(this is a required pattern if you need to use context providers)
On the last point sometimes you just have to try and see if it errors out. If you know how the component is built then you can guess if it needs the directive or not.
Link for example is well documented and it doesn't need "use client" since it just renders an a tag and doesn't have any interactivity that would need js attached to it@not-milo.tsx Since React 18 all components are server components by default until you explicitly declare it a client component with the `"use client"` directive.
You cannot import server components into client ones, but what you can do is pass a server component as prop to a client components like this for example:
tsx
<ClientComponent>
<ServerComponent></ServerComponent>
</ClientComponent>
(this is a required pattern if you need to use context providers)
On the last point sometimes you just have to try and see if it errors out. If you know how the component is built then you can guess if it needs the directive or not. `Link` for example is well documented and it doesn't need `"use client"` since it just renders an `a` tag and doesn't have any interactivity that would need js attached to it
Streak-backed OrioleOP
IMO these three statements are conflictual:
all components are server components by default
You cannot import server components into client ones
it doesn't need "use client" since it just renders an a tag and doesn't have any interactivity that would need js attached to it
perhaps the docs should be updated to reflect that if a component doesn't use any client-side features, it can be used equally as a client or server component
at least it was confusing to me 😅
The point of
Placing the directive in a server component that doesn't need it would negatively impact your website's loading speeds and seo since the component would need to be rendered on your user's browser instead of the server.
"use client" is that it should be used to specify which components need client side interactivity through the use of js.Placing the directive in a server component that doesn't need it would negatively impact your website's loading speeds and seo since the component would need to be rendered on your user's browser instead of the server.
@Streak-backed Oriole IMO these three statements are conflictual:
> all components are server components by default
> You cannot import server components into client ones
> it doesn't need "use client" since it just renders an a tag and doesn't have any interactivity that would need js attached to it
What is it that you find conflicting about them?
how would I even know if a component is client or server? As a random example, how would I know if Link is client or server?you need to check the rendering tree to know if a component is a server component, because a component can be both depending on the type of the component rendering it. as a rule of thumb:
1. if the component has
'use client' at the top, it is a client component2. if the component is async, it is a server component
3. if the component is being rendered by a client component, it will be a client component as well
4. if the component is being rendered by a server component and it is not a client component itself (because of the
'use client' directive) it will be a server component, otherwise it is a client componentLink is a client component because it has the 'use client' directive: https://github.com/vercel/next.js/blob/fd508b086c33413206c413bda6728a709504e965/packages/next/src/client/link.tsx#L1Answer
Streak-backed OrioleOP
Alright, I think I understand better
thank you all