Call server component in client component in nextjs 15
Unanswered
Transvaal lion posted this in #help-forum

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.
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

@Transvaal lion 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;

There isn't a problem in technical sense. But in semantic sense, your "ServerComp" when called inside a Client Comp, it will be converted into client components. Therefore, in semantic sense, it doesn't make sense.
Components are neither client or server by default up until they are called in another component will their identity be changed. Therefore, it is possible for a component be both a client component and a server component.
Components are neither client or server by default up until they are called in another component will their identity be changed. Therefore, it is possible for a component be both a client component and a server component.
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
@alfonsus There isn't a problem in technical sense. But in semantic sense, your "ServerComp" when called inside a Client Comp, it will be converted into client components. Therefore, in semantic sense, it doesn't make sense.
Components are neither client or server by default up until they are called in another component will their identity be changed. Therefore, it is possible for a component be both a client component and a server component.

Transvaal lionOP
in nextjs 15 all the comp under src directory is server component by default. also I am not rendering server component into client (it wont work) . I just pass the data to server comp as argument to its param infoP

@Transvaal lion in nextjs 15 all the comp under src directory is server component by default. also I am not rendering server component into client (it wont work) . I just pass the data to server comp as argument to its param infoP

Yes you pass data to server comp as argument but those component are stil rendered in the client
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.

@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

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

@Transvaal lion so how do I pass info (clickedStatus: true) from client comp to server comp? button is a client comp

you want to send data to the server?

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.
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.

That "server component call" is not a server component call rather just a normal client-side funciton call