Next.js Discord

Discord Forum

use client on some parts of server-side component/page?

Answered
Chum salmon posted this in #help-forum
Open in Discord
Avatar
Chum salmonOP
If I have the following code and I only want part of it to be client-side (where the event handlers are), is that possible to do without breaking it out into a new, very specific component?

Thanks
Image

24 Replies

Avatar
Chum salmonOP
I would only want this part, besides the H2 to be client side
Image
Avatar
SupremeDeity
Why arent you marking those two components are "use client" then?
You could also try dynamic importing "i think"
With ssr disabled(if needed)
Avatar
Chum salmonOP
They are, but I want to be able to compose the event bus which has to be done outside of the component
Plus, the button needs to be client-side too
dynamic importing?
Answer
Avatar
Chum salmonOP
Yes, this looks like what I need. Thank you
Avatar
SupremeDeity
Try and come back here if it isnt what you need
Avatar
Chum salmonOP
Sounds good. Thank you
Avatar
Chum salmonOP
Actually, I thought you could append custom HTML to a dynamic call. I think lazy loading is assuming I already have a component in place?
Do you just have to make a lot of components even if you only use them once? 🤔
Avatar
Chum salmonOP
The main drawback here is I'm trying to use client API's like button callbacks to dispatch event calls in this case. Like I'm trying to create an event bus which invokes all functions to send their data to an S3 bucket, but because I'm trying to do it this way it's forcing me to use a client component. I wonder if there's a way to do this without pulling it into a client component.
Avatar
SupremeDeity
Did you try using the ssr option in dynamic()?
Also you need to pass a component while the component is loading using the loading prop inside dynamic()
Avatar
Chum salmonOP
I don't think that would solve my issue. The issue I'm having is I'm trying to compose how my components work together without creating a whole new component to do that
Is there a way to make a client component from a const function so I don't have to make a whole new file for it?
Avatar
Chum salmonOP
Image
Yeah like this isn't working which is what I thought. I think dynamic is expecting an import
not JSX
otherwise I could just put my JSX into that and make it only client-side
Image
Because I get this