Passing Server Components to Client Components as Props - Docs not clear

[wesnolte]

According to the documentation you can pass a server component to a client component using the children prop (works), or any other prop (doesn't work) i.e.

This pattern works when I have a server component that passes a component as a prop to another server component e.g.

const ComponentAsProp = () => {
    return (
      <p>hello world</p>
    );
  };

  return (
    <>
      <AnotherComponent cas={ComponentAsProp} />
    </>
  );

And

 export default function AnotherComponent({cas}){
  return <cas />;
}

However, if I mark the receiving (second) component as a client component with use client; this no longer works giving an error of Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".. However, I think this error is more for server actions - or am I wrong?

Long story short, I'm not clear on how to pass a server component to a client component as a prop outside of using children. But this only gives me 1 prop to work with when I need several in order to compose my component and page. Does anyone have a working example?

[icyJoseph]

In your example you should have had:

 export default function AnotherComponent({cas}){
  const Tag = cas;
  return <Tas />;
}

Otherwise I'd try to render a DOM element called cas.

With that out of the way.

I've been corrected on this at least once, but let me see if I can get this right this time.

The right way to pass a server component to a client component is using JSX, and not a function rather, that is, pass a React Element to the client component.

// This WON'T work
import { ClientComponent } from './client';
import { ServerComponent } from './server';

export default function Home() {
  return <ClientComponent slot={ServerComponent} />;
}

But this will:

import { ClientComponent } from './client';
import { ServerComponent } from './server';

export default function Home() {
  return <ClientComponent slot={<ServerComponent />} />;
}

Where the ClientComponent is:

'use client';
import type { ReactNode } from 'react';

export const ClientComponent = ({ slot }: { slot: ReactNode }) => {
  return <>{slot}</>;
};

And the Server Component just renders a div tag.

The explanation to this, AFAIK, is here: https://react.dev/reference/react/use-client#serializable-types

The serializable types, lists: - Client or Server Component elements (JSX), but it says that only Server Action functions can be passed over the network boundary (into the client module).

Another way to see it, is that this is just plain composition, where the Client Component, is parent, but doesn't own the Server Component, and React just knows how to patch them up in the UI, but if you pass a function, then you are making the client component own the passed in component, because it has to render it, rather than only declaring where it goes.

Where I've been corrected is in whether or not you can slot Client into Client, through a server Server Component IIRC.

• https://stackblitz.com/edit/github-ct3nlz?file=src%2Fapp%2Fpage.tsx,src%2Fapp%2FThing.client.tsx,src%2Fapp%2FSomeLink.client.tsx Apparently passing a function to Thing, should've worked, but currently one has to do it with JSX, but that's not the pattern you are asking for...
• Error when nextjs tries to warn about non-plain object prop binding - Error: Cannot convert a Symbol value to a string #61966 (comment)

[wesnolte]

Thank you, I tried many combinations but not the one you suggested and that worked. In my googling I could find many examples of passing a component as a prop to another component, but none of them showed how the receiving component then used that prop.

[imteekay]

What if I wanted to pass props to the slot component (server component) from the client component?

'use client';
import type { ReactNode } from 'react';

export const ClientComponent = ({ slot }: { slot: ReactNode }) => {
  // --> how to pass custom props to slot that I only have access in this client component?
  return <>{slot}</>;
};

[icyJoseph]

Then something like the renderAs pattern could work:

• https://stackblitz.com/edit/nextjs-wskiwb4p?file=app%2FClient.tsx,app%2Fpage.tsx

[Iftee97]

@icyJoseph @wesnolte

i get that this will work

`import { ClientComponent } from './client';
import { ServerComponent } from './server';

export default function Home() {
return <ClientComponent slot={} />;
}`

but what if the needed props? what then? and those props can be passed from within the ClientComponent.

such as:

`export default function ClientComponent() {
const someVal = 458

return (
<>
{slot}
</>
)
}`

// how would this work in a scenario like this?

[icyJoseph]

You mean, that the client component should pass props to the Server Component? Well, assuming the Server Component can't be opted in to Client component (by virtue of being owned by a use client), then you are out of luck. Passing props in this case, means an asynchronous transfer right? Somehow the passed props, have to travel to the server, a new thing has to be rendered, and the result sent back. That's not supported just yet.

In this case, often a context provider can help, as long as the props passed, are not expected to be using in the server, but rather, just need to be used deeper within the tree.

For other cases, url queries, can help, the client can update the url search params, and that'll trigger a run of RSC, on the server, that can update the server components.

[Iftee97]

@icyJoseph ah, that makes sense, thanks