#How does this work???

125 messages · Page 1 of 1 (latest)

velvet timber
#

Clearly, this is a server component. But it has an onClick event and doesn't throw errors and works? How???

image.png
static walrusBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

river parcel
#

Does your console log in browser or server?

My guess: it logs in browser and you import the navbar from a client component. So it is client

random quarry
#

You are using "use server" directive, it's defining a server action

#

so it's the same as passing a server action to onClick

#

no reason to throw an error

signal hawk
random quarry
#

sorry, editied - "use server"

signal hawk
#

Sorry I was being an ass I knew what you meant 😅

#

and while I agree with you... I also didnt know this was a pattern! Its kinda neat!

signal hawk
digital flume
#

Yeah is a valid thing, but aside from cool demo's it's really not that used

signal hawk
#

Yeah, I couldnt imagine a real use either :/

digital flume
#

Like for an actual app, you would be playing with more checks that would make this chaos code + you can't have loading and other error states

random quarry
signal hawk
digital flume
#

I personally think the best way for server actions is just action.ts file (ie top level use server files)

signal hawk
#

ye, agreed. Less ambiguous. I do the same thing, we have gone over how similar our syntax's are for files.

velvet timber
velvet timber
velvet timber
digital flume
#

To client

#

And thus it invokes the function

velvet timber
digital flume
#

It's a "server " action tho

random quarry
#

it's a server action

velvet timber
#

Then why does this not work?:

image.png image.png
digital flume
#

hmm must be even more special magic

#

but i thought it would work

velvet timber
#

I thought so too

digital flume
#

like server action is the only way you can pass a "function" to a client component from server

#

what error do you see btw?

velvet timber
# 
 ⨯ Error: Attempted to call signOut() from the server but signOut is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.
#

even this doesn't work

image.png
#

HUH?!

This doesn't work

image.png
#

But this works?????

image.png
#

how and why

digital flume
velvet timber
#

But...

#

it's a function

#

like a normal function

#

not arrow function

digital flume
#

that doesnt mean anything

velvet timber
#

it shouldn't matter where it's declared

digital flume
#

its prob deleted in the dead code elimination stage (ie it wont be ran) so it isnt seen by anything

velvet timber
#

but like

#

im confused

random quarry
digital flume
#

i mean in docs i remember them saying to use formAction={} anyway

velvet timber
#

see this works

velvet timber
#

im so confused

digital flume
#

why js be like that

velvet timber
digital flume
#

its just chaos

velvet timber
#

wdym

#

why putting functions after return is chaos?

#

i always do that

#

it's cleaner

digital flume
#

btw are you are on nextjs 14 or 15?

velvet timber
#

15

digital flume
#

i feel like there is a chance it may work

#

one change they did in v15 is not create if not used, so maybe the method assumes code after return is dead

velvet timber
#

abhabhahbhabbhu

#

im confused

digital flume
#

so can you try it in v14 :)

velvet timber
#

Yes, that's what i'm about to do. Which was the latest 14 version?

digital flume
#

v14.2.15 #releases message

velvet timber
#

ty

#

This doesn't do anything

image.png
#

and this throws an error

image.png image.png
digital flume
#

very interesting

velvet timber
#

indeed

#

maybe onClick being auto converted to a form (i suppose) is a next 15 feature?

#

Ok so this works

image.png
#

but this still doesn't work (form gets reloaded as action is empty)

image.png image.png
#

my brain stopped braining

#

🧠 ❌

random quarry
#

I think that's sort of updates of Next v15

velvet timber
digital flume
random quarry
digital flume
random quarry
#

by default any button its type = "submit"

velvet timber
#

yeah i know that

#

the question is

#

why it doesn't recognise the function that is after the return

digital flume
velvet timber
#

even in next 14

random quarry
velvet timber
#

is that intentional?

digital flume
velvet timber
random quarry
digital flume
#

i just wanted to point to it so op doesnt have to :)

#

idk even what orig issue is

#

but i know that server actions have some chaos invoking methods

random quarry
#

well, actually original question was answered I guess

#

we are currently talking about the related ones

digital flume
#

nice, btw which msg

random quarry
#

lol original question was "how does this work?" - and I answered

#

now it's time for "why not work!!!"

digital flume
#

(i more asking so i can mark thread on a message)

random quarry
#

🙂

static walrusBOT
digital flume
#

nice

#

(OP you can still change it if you like)

velvet timber
#

ok, so here's what we've discussed so far:

  • onClick works on a server component if it's passed a server action after next 15
  • The server actions has to be declared before the return statement or inline at the onClick callback. Importing them from a seperate actions file won't work.
  • My brain stopped working
velvet timber
#

But i'm still confused on why putting a function after the return statement is not working

random quarry
random quarry