🤯 NextJS Server Actions - never write Post Requests again

[@neetdemon]

I wasted all of yesterday trying to pass data from a Client Component to a Server Component. You just saved my ass. Thank you so much!!!! Also subscribed :) looking forward to more vids

[@activenode]

Thanks man! That's the kind of comments I'm making videos for :)

[@gunasheelan4130]

found the life save i have been searching this for weeks thanks a bunch 😇😇

[@arandomguythatdoesntpost]

very cool, thank you for explaining this! ❤

[@jgturner29]

Can you build out the validation with error message on client side would like to see this video continued...👍👍

[@parkerrex]

yesssssss

[@kemekenneth]

Thanks for the video. Now this gets me thinking, can I preventDefault, validate the inputs, then call server action?

[@activenode]

Yes, you can!

[@hrithikvishwakarma001]

Great 🎉

[@CheulongSear]

I am new to this stuff. Could you show me how backend handle this?

[@activenode]

Hey. Im working on more Videos 🙌

[@LtTheXamax]

Thanks, unfortunately, in my project the data was not passed true the components, I'm using latest version and added the experimental thing. :/

[@activenode]

Do you have a sample link / codebox?

[@LtTheXamax]

@@activenode Never mind, I made it work with useTransition. Man, you saved my life, I was trying make it work for 3 days and your video helped me a lot, please make more videos, you are great. Love you!

[@activenode]

@@LtTheXamax Awesome! thanks so much 🙌

[@Prathamesh-o6n]

is it possible in server actions that we can send body parameters in an object in POST method and fetch data

[@activenode]

Can you specify what you're trying to do? Cheers

[@Prathamesh-o6n]

​@@activenodei have a api url in which i have to send some request body object through headers and then it give a data in the output in server actions this doesnt work but in axios method it works

[@stevebendersky2056]

How do I clean the fields such as setState with empty string after sending request?

[@activenode]

Sorry for the long wait, the comment didn't show in my dashboard. As you can see in the video, there is an onSubmit in combination with the action. In the onSubmit you can trigger the setState.

[@raFFe_YT]

So, if I understood correctly you’re saying that even if you a serve action from a client component it still works?

[@activenode]

Yup because basically only a reference to that action is passed, not the action itself so to say.

[@parkerrex]

can you add a video for using kysely and planetscale?

[@activenode]

Noted, checking what can be done.

[@rayyanalam4815]

A question, was wondering if I should use this approach for sending a post request to my backend which is in python to calculate some stuff and get back the calculated result? Or should I just go with client side approach? I am very new to this and have trouble understanding which might be a better approach.

[@activenode]

It depends. Talking to your Python script can be done via NextJS Backend as both are Backend. If you have a Python only Backend being a Server in its own then you can also skip the NextJS Backend but also that removes the possibility of Server Action Usage

[@Prathamesh-o6n]

how to send body parameter and fetch data in the server actions?

[@activenode]

I think for this you might be interested in the other video which shows how we can trigger server actions. Hope that answers your question? If not, just come back again :) th-cam.com/video/6TRwsu0mUps/w-d-xo.html

[@Prathamesh-o6n]

@@activenode im trying this but its not working import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { getServerSession } from "next-auth";
import React from "react";
interface Session {
user?:{
data?: {
access_token: string;
};
}
}
export default async function fetchCount() {
const session: Session = (await getServerSession(authOptions))!;
const token = session?.user?.data?.access_token;
console.log(token, 'ttt');
const res = await fetch('api-for-example.com ', {
next: {
revalidate: 0,
},
method: "POST",
body:JSON.stringify({
"stats": "current_user",
"query_data": "yahoo.net",
.....
}),
headers: {
"Cookie": `access_token=${token}`,
"Content-type": "application/json",
},
});
return await res.json();
};

[@LtTheXamax]

But the server actions reloads also styles and so on? Is there a way not to reload the styles?

[@activenode]

Are you using mutations with Cache Revalidation in your Server Action? In my case, without, it didnt reload styles.

[@LtTheXamax]

@@activenode yes I'm using mutations, how can I mutate data without reloading styles? The data is fetched via api.

[@activenode]

@@LtTheXamax Server Actions are still in Alpha so there might be new stuff incoming that solves the problem of a "general style reload". There is potential workarounds. I might make an additional video for that.

[@LtTheXamax]

@@activenode that would be great, can't wait!

[@activenode]

@@LtTheXamax Hope this one helps th-cam.com/video/6TRwsu0mUps/w-d-xo.html

[@andreaswu7973]

how to prevent empty form submit on the server?

[@activenode]

Coming soon in my next video

[@andreaswu7973]

@@activenode looking forward to it!

[@activenode]

@@andreaswu7973 Hope this one helps: th-cam.com/video/6TRwsu0mUps/w-d-xo.html
In this video I am showing how to run actions manually and hence prevent the submission from client -> server.
However: If your question was more related to: How to submit when no js is involved. (server-only) please tell me. I was thinking about getting deeper into server-only / progressive enhancements as well.

[@andreaswu7973]

@@activenode hey thanks for this. if you plan to make a series about server actions that'd be great!

[@PIRAKAS666]

And what can we do with it?
Would love to see a real world scenario.

[@activenode]

Hey, sorry for the late response, just seen it. The most common use-case is progressive enhancement (even though there's more).
E.g.: You create a form with action=YourServerAction and it will both available on frontend (w/ JavaScript) and as well as a URL (without JavaScript on the Frontend). Even though, there's very few people disabling JavaScript, the reasoning behind it is that in our internet-everywhere world sometimes e.g. on the train, you can loose connection and the Frontend isn't loaded properly. Then backend will take over

[@parkerrex]

subbed

[@watb8689]

feels like asp all over again

[@activenode]

Is that a good or a neutral feeling?

[@heleneniederfischach1943]

Muss das immer in englisch sein???

[@DrsHWolfenstein]

Yes!