Next.js Discord

Discord Forum

What do you do when you have to use onClick or any other client side thing

Unanswered
American Kestrel posted this in #help-forum
Open in Discord
American KestrelOP
... and then have to turn the whole page into "use client" and that causes issues with other components that call them;-;
Its the bane of my existence, how ru guys doing onClicks and onSubmits on server side files

28 Replies

@American Kestrel ... and then have to turn the whole page into "use client" and that causes issues with other components that call them;-; Its the bane of my existence, how ru guys doing onClicks and onSubmits on server side files
Dayo
you can try lifting the onclick handler to the server component

"use client"

function ClientComponent({handleSubmit}) {
    return (
         <button onClick={handleSubmit}>Submit</button>
    )
}

function ServerComponent() {
const data = getDataFn()

function handleSubmit () {
    // run some code here
}

    return (
        <ClientComponent handleSubmit={handleSubmit} />
)
}
American KestrelOP
no no
i dont want to do "use client"
everything else in the page is server side
cant turn it into client side
except for that one little button with an "on click";-;
American Curl
You could just extract your one little button to a separate client component using use client. Btw, client components aren't that bad to use. Lee Robinson explains this quite well https://www.youtube.com/watch?v=6jM_0wDOw4g
American KestrelOP
okay
so you're saying
i make a component of that one button
and then call the component?
American Curl
Yep
no thanks
imma pass
XD
American Curl
of course you can do data fetching and mutations in them
American KestrelOP
oh
is there a link of this?
i can make api calls
but i cant say, for ex, use Clerk's auth
mutations hmm
never heard of them
im new to this;-;
American Curl
i dont know clerks sdk but you should be able to use it in a client component
with mutations i mean http requests that are not fetches
American KestrelOP
thanks
imma check these out