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

dynamic importing?

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

not JSX

otherwise I could just put my JSX into that and make it only client-side

Because I get this