use client on some parts of server-side component/page?
Answered
Chum salmon posted this in #help-forum
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
Thanks
24 Replies
Chum salmonOP
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)
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?
Chum salmonOP
Yes, this looks like what I need. Thank you
Try and come back here if it isnt what you need
Chum salmonOP
Sounds good. Thank you
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? 🤔
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.
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()
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?
Chum salmonOP
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
Because I get this