RSC + no forms + server actions
Unanswered
Black Caiman posted this in #help-forum
Black CaimanOP
server actions question. Can I use server actions in a Server Component (RSC) without using
Server actions seem pretty incomplete if you can't call them for non-form user interactivity in Server Components
I'm basically trying to accomplish AJAX after page load without having any "use client" and hooks in my code. That escalates the complexity of the app very quickly for my junior programmers.
action prop and forms? The useTransition is a hook so it can only be used in client-side components.Server actions seem pretty incomplete if you can't call them for non-form user interactivity in Server Components
I'm basically trying to accomplish AJAX after page load without having any "use client" and hooks in my code. That escalates the complexity of the app very quickly for my junior programmers.
31 Replies
Giant panda
Yes, you can just call the functions, optimally wrapped in a transition.
See in this example how I just call the server action passed into that client component: https://github.com/JetBrains/webstorm-rsc-webinar/blob/1d91eade7198928858bc2058d1b6e9b96961af2e/app/components.client.tsx#L42
Black CaimanOP
Thanks for the response, but I am talking about keeping all components as RSC Server Components. Your example works because it is a 'use client' component.
You can use <form action={...}> without turning it into a client component, so I'm wondering why other things like onClick can't do that
You can use <form action={...}> without turning it into a client component, so I'm wondering why other things like onClick can't do that
Giant panda
There is nothing wrong about client components.
And a client-side event handler that invokes a server action must be a client-side component.
The reason why the form actions work is that it's merely old school HTTP requests sent to an endpoint without any JS
Black CaimanOP
Form action still uses AJAX though, and that's all I want out of it
Giant panda
The same fashion we used to do 20 years ago with
<form action="/login">...</form>Black CaimanOP
there's no page refresh like old school form action
Giant panda
Anyways, my point being is that you shouldn't be afraid of using client components where necessary.
Your use case describes that you clearly want one.
Black CaimanOP
and I disagree that there is nothing wrong with client components. not a single one of my junior developers is grasping hooks
Giant panda
That argument is about something else entirely.
Black CaimanOP
it's a convoluted concept. the thing I love about server actions and RSC is it is a return to simplicity
Giant panda
But you want interactivity - server components just aren't about interactivity.
Black CaimanOP
well, the thread is a question specifically about it 🙂
<form action> is... so if it's not possible with onClick yet that answers my question
I'll have to wait bc I assume that is coming in the future. I see no reason it wouldn't technically
I don't think it will ever happen, server actions to be somehow interactive without a form need an event handler to call them, RSC cannot have event handler.
The way you see it working for forms is compiler magic to create an hidden input with a reference to the function, I think JS is not ever used in it (I might be wrong on that)
The way you see it working for forms is compiler magic to create an hidden input with a reference to the function, I think JS is not ever used in it (I might be wrong on that)
Black CaimanOP
this works 🤣 🤣 🤣🤣
genius or mad man?
Giant panda
That is a very pointless "solution" just because you think a completely common client component interaction is bad.
But you do you.
Black CaimanOP
I don't know, I mean that simple little thing completely eliminates the need to switch back and forth between server and client components
seems like it should be a baked in feature
Giant panda
It entirely defeats the purpose of server actions and introduces another level of indirection with no value at all.
Embeding a form for the sole purpose of running a function vs. just transparently calling a function that happens to run on the server
Black CaimanOP
also compatible with SSG, yours isn't. just saying 😛
Giant panda
Just because you aren't familiar with the right tools. Server actions are usable within Suspense boundaries.
Black CaimanOP
how would a Suspense boundary make your code static generated? all of your JS would still be loaded client-side even with a boundary