When to use server actions in Next JS 14

🎓 When to use api route / route handlers or server actions in Next JS 14 app router.

Vercel's video on 10 mistakes developers make when using the app router:

#nextjs14 #serveractions #nextjstutorial

[WebDevEducation]

Let me know if I've forgotten any scenarios!

[glengal]

Concise and proper. Just as I wanted. Thanks a bunch

[ruhnhbc]

Thank you for the amounts of valuable knowledge you put out for free!

[liangfamily]

Awesome! It’d be great if you follow up with code examples in the future

[Skillthrive]

Another one I came across is when the payload would be over 1MB because that's what server actions are limited to.

[richardmacarthy]

Tom, my main man! How's it going? Long time no see haha. Thanks for the pointers. Much love x

[jovanjevtic]

So, if I already created a website with nextjs and server actions and want to build a mobile app, I should then create api routes for all those server actions to cover same functionality in mobile app? (or whole another express server)

[nasko]

Here's the confusing part. For me the most difficult thing about fetching data is being able to SECURELY fetch data from a client component and by securely I mean authenticating/authorizing the user first. With Server Actions that becomes extremely easy because you can do the authentication check inside the server action itself. HOWEVER in nextjs docs they've explicitly said that server actions are meant for data mutations and they are all POST requests, also AFAIK they get queued so you can't execute them asynchronously (?). That's why I've been using route handlers for fetching from client components, and when I need to fetch in server components I just use helper functions without the "use server" directive and I execute those at the top of the server component. Thoughts?

[umer]

Can we use server action in next if we have a backend in laravel?

[adarshrathi]

i want suggestion this type of examples

const onSubmit = async (values: z.infer<typeof formSchema>) => {
try {
const url = qs.stringifyUrl({
url: "/ api /channels",
query: {
serverId: params?.serverId
}
});
await axios.pos t(url, values);

form.reset();
router.refresh();
onClose();
} catch (error) {
console.log(error);,

in server action how we manage StringifyUrl, any idea, because it create me a lot trouble.

[ber]

i use it as you ...
just i try to never fetch data in client component...
as it is possible, always fetch in async page and pass data as props to client components ...

[u-def]

I didn't event think that server action doesn't support streaming, So
I was wondering what is the differences when I saw the title of your video.
But this video really informative and not unneccessary long.
Thank you Youtube tells me this channels.

[TabuHana]

this is self explanatory i feel, but nice vid