Quality of User and Code question. I need the best answer!!!!
Answered
gin posted this in #help-forum
ginOP
look, i have split this component into two parts, the right side is loaded by server, the left side is on client so i can attach a onclick handler on the parent of the flex. no the problem is my client wants that when hovering and clicking on the right side (icon usw) the same handler triggers as in the client. we all know we cant do that. so i want to know my options. the one thing i can do is just have a serverside wrapper fetching the data and passing it to the client but that will i think slow down the time to first byte because the component first comes into view after fetching completes. Im using react suspend for the serverside rn
38 Replies
ginOP
my customer wants this so i have to do it
i just want to know my options
i have very good web vitals score of the current build and i dont want to mess it up
you want to be able to click on the icon?
I wasn't able to understand the question
ginOP
this is my serverside wrapper
so i can use suspense
very good for perfomance
i need onclick on the parent but i dont want to pass in data trough components
what are my options
@averydelusionalperson
you want onclick to the div with joinwrapper styles?
ginOP
yzp
yup
it is server component right?
thinking
// :white_check_mark: This pattern works. You can pass a Server Component
// as a child or prop of a Client Component.
import ClientComponent from "./ClientComponent";
import ServerComponent from "./ServerComponent";
// Pages are Server Components by default
export default function Page() {
return (
<ClientComponent>
<ServerComponent />
</ClientComponent>
);
}hmm, you can do something like this ig?
ginOP
so the thing i was saying in #off-topic is true?
xD
you can pass the server component as child to the client component
but can't use server component in client
two different things
import ServerComponent from './ServerComponent';
export default function ClientComponent() {
return (
<>
<ServerComponent />
</>
);
}@averydelusionalperson you can pass the server component as child to the client component
ginOP
in the client component i have my div that accepts children or what
ginOP
ah cool
you accept children -> that server component
Answer
ginOP
nice ty
once your problem is solved, consider marking answer as solution
🫡