use client on some parts of server-side component/page?
Open in Discord
Chum salmon posted this in #help-forum
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?
View full answer
Answered by SupremeDeity
I would only want this part, besides the H2 to be client side
Why arent you marking those two components are "use client" then?
You could also try dynamic importing "i think"
With ssr disabled(if needed)
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
Yes, this looks like what I need. Thank you
Try and come back here if it isnt what you need
Sounds good. Thank you
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? 🤔
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.
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()
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?
Yeah like this isn't working which is what I thought. I think dynamic is expecting an import
otherwise I could just put my JSX into that and make it only client-side
Because I get this