react server action
Answered
Ruby-crowned Kinglet posted this in #help-forum
Ruby-crowned KingletOP
Hello community, in your opinion which one is best for form submissions: react server actions of server actions?
react server actions seems to disclose secret data (just like regular clientside requests) in requests while server action doesn't
react server actions seems to disclose secret data (just like regular clientside requests) in requests while server action doesn't
Answered by joulev
You are doing nothing wrong, things still work as expected. Both the action={…} and the onSubmit={…} methods work, they both trigger your server action on the server and your credentials/secrets on the server are not exposed.
The reason it shows up in your network tab is because to trigger a server action, the client still needs to send a request to the server. Since here you are submitting a form and the server action needs that form, the client sends that form in the request payload too (which is why the request body is a form data). This is normal, you cannot hide this from the network tab because it is a request from the browser.
Now, about the difference between the action={…} and the onSubmit={…} approaches, it’s unrelated to the network tab. action={…} is simply a way to submit the form that allows progressive enhancement and the ability to submit the form with JavaScript disabled. The onSubmit={…} method doesn’t work in progressive enhancement and doesn’t work with js disabled, but it’s more flexible as you can do anything you want to handle that form submission.
The reason it shows up in your network tab is because to trigger a server action, the client still needs to send a request to the server. Since here you are submitting a form and the server action needs that form, the client sends that form in the request payload too (which is why the request body is a form data). This is normal, you cannot hide this from the network tab because it is a request from the browser.
Now, about the difference between the action={…} and the onSubmit={…} approaches, it’s unrelated to the network tab. action={…} is simply a way to submit the form that allows progressive enhancement and the ability to submit the form with JavaScript disabled. The onSubmit={…} method doesn’t work in progressive enhancement and doesn’t work with js disabled, but it’s more flexible as you can do anything you want to handle that form submission.
23 Replies
@Ruby-crowned Kinglet Hello community, in your opinion which one is best for form submissions: react server actions of server actions?
react server actions seems to disclose secret data (just like regular clientside requests) in requests while server action doesn't
What do you mean? React server actions are server actions
They are the same thing
Ruby-crowned KingletOP
but you can see them in devtools while server actions you cannot see
because they run on server
you can see it in Network tab nad in payload - you can see all the data you send with a request
that's bad I guess
Can you clarify? What do you see in the dev tool with react server action?
Because they are the same thing and if you see the fetches made from the action in the network tab then it is not a server action, it’s perhaps a client action
Ruby-crowned KingletOP
this "create" is react server action (function that uses "use server") and the form that invokes it uses "use client"
I put the "create" function in action prop of form
@Ruby-crowned Kinglet this "create" is react server action (function that uses "use server") and the form that invokes it uses "use client"
Hmm. What happens with server actions instead? You don’t see this request showing up in the network tab?
Ruby-crowned KingletOP
no, only in terminal, as it should be
Can you show your code? For both cases
Ruby-crowned KingletOP
sure
these screenshots are react server side:
Ruby-crowned KingletOP
please wait something is wrong on my side
Ruby-crowned KingletOP
hmmmm now even server actions runs on frontend it seems because I can see server action in devtools:
I cannot understand what I'm doing wrong
@Ruby-crowned Kinglet I cannot understand what I'm doing wrong
You are doing nothing wrong, things still work as expected. Both the action={…} and the onSubmit={…} methods work, they both trigger your server action on the server and your credentials/secrets on the server are not exposed.
The reason it shows up in your network tab is because to trigger a server action, the client still needs to send a request to the server. Since here you are submitting a form and the server action needs that form, the client sends that form in the request payload too (which is why the request body is a form data). This is normal, you cannot hide this from the network tab because it is a request from the browser.
Now, about the difference between the action={…} and the onSubmit={…} approaches, it’s unrelated to the network tab. action={…} is simply a way to submit the form that allows progressive enhancement and the ability to submit the form with JavaScript disabled. The onSubmit={…} method doesn’t work in progressive enhancement and doesn’t work with js disabled, but it’s more flexible as you can do anything you want to handle that form submission.
The reason it shows up in your network tab is because to trigger a server action, the client still needs to send a request to the server. Since here you are submitting a form and the server action needs that form, the client sends that form in the request payload too (which is why the request body is a form data). This is normal, you cannot hide this from the network tab because it is a request from the browser.
Now, about the difference between the action={…} and the onSubmit={…} approaches, it’s unrelated to the network tab. action={…} is simply a way to submit the form that allows progressive enhancement and the ability to submit the form with JavaScript disabled. The onSubmit={…} method doesn’t work in progressive enhancement and doesn’t work with js disabled, but it’s more flexible as you can do anything you want to handle that form submission.
Answer
Ruby-crowned KingletOP
ohhh okay thank you!
and could please clarify why react server actions are more secure than regular requests (maybe there is something beneath nextjs creating api route for it) ?
and I also saw that it affect SEO somehow - can you please clarify this too?
and could please clarify why react server actions are more secure than regular requests (maybe there is something beneath nextjs creating api route for it) ?
and I also saw that it affect SEO somehow - can you please clarify this too?
@Ruby-crowned Kinglet ohhh okay thank you!
and could please clarify why react server actions are more secure than regular requests (maybe there is something beneath nextjs creating api route for it) ?
and I also saw that it affect SEO somehow - can you please clarify this too?
React server actions are not more secure than normal api route requests. If you make a route handler/api route that does the same as your server action, as far as security is concerned there are no differences.
Server actions do not affect SEO in any way.
Server actions do not affect SEO in any way.
Ruby-crowned KingletOP
okay thank you very much, you're awesome!