Next.js Discord

Discord Forum

Call server component in client component in nextjs 15

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Avatar
Transvaal lionOP
Is there any problem to call server component in client component to pass argument?
This works but I wanna know if there any downside.
client comp
'use client';

import ServerComp from './server_comp';

const ClientComp: React.FC = ({ infoP }) => {
  return (
    <div className="client_comp">
      <button
        onClick={() => {
          const myPromise = new Promise<string>((resolve) => {
            setTimeout(() => resolve('I love You !!'), 1000);
          });

          ServerComp(myPromise);
        }}
        className="p-2 bg-blue-500 text-white rounded">
        {infoP.name}
      </button>
    </div>
  );
};

ClientComp.displayName = 'ClientComp';

export default ClientComp;

server comp

import ClientComp from './client_comp';

const ServerComp: React.FC = async (param) => {
  console.log(await param);

  return (
    <div className="server_comp">
      server
      <ClientComp infoP={{ name: 'Button' }} />
    </div>
  );
};

ServerComp.displayName = 'ServerComp';

export default ServerComp;

17 Replies

Your I Love You !! promise is still being called in the client because of the 'use client' client boundary. "use client" is a one way gateway from server to the client. It can't call components in the server but it still can compose server components
Components are ambiguous by default regardless of where you put it. The components is only determined by where you import the component
Only default export components from file conventions like page.js and layout.js are by default server component. Saying all comps under /src is server comp is false
so how do I pass info (clickedStatus: true) from client comp to server comp? button is a client comp
any shortcut method for nextjs 15? I can pass using fetch or axios but dnt want it.
Avatar
@alfonsus Only default export components from file conventions like page.js and layout.js are by default server component. Saying all comps under /src is server comp is false
Avatar
Transvaal lionOP
If i made the page, layout server sided comp and other client side will I get full SSR benefit?
but layouti is a guaranteed SSR
client components can be SSR'd if you have the datas initially
Avatar
Roseate Spoonbill
@Transvaal lion If you want to update a server component in the ui for the user who clicked on client component, then your server component isn't really a server component. It should be a client component, which updates based on some shared state.

If, on the other hand, you'd like to update a component for everyone, than change the underlying data, and revalidate the path - then server component will update for person who performed an action and for everyone else, who visits the ui.

I think the example you provided is too abstract and a bit incorrect syntax-wise, so if you have any specific use cases, it would be better if you provided those scenarios as a context to the question. Otherwise it's hard to judge the aim of this server component call.
Avatar
That "server component call" is not a server component call rather just a normal client-side funciton call