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?
Thanks a lot for your insights. I am trying to wrap my head around server actions, and I have a question related to the scenario of fetching data in a client component. From my understanding server actions always use the "POST" method for the request sent to the backend. And using a "POST" request to fetch data, feels wrong to me. It should be a GET. Using a server action in this scenario goes against the initial intent of this feature (data mutation) I guess, doesn't it ?
Yes you're right, altho I'd be fetching data in a server component before doing that, and passing it down to the client component if it needed to be passed down rather than directly fetching from the client component.
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)
@@WebDevEducation I had the same question. I am building a listing directory web app with nextjs and would like to build the mobile version of it using expo. Is it a best practice to use route handlers for the webapp and tanstack query for instance for the mobile app?
Yes it sounds like you'd want to use route handlers for this scenario which can be called from anywhere (within your next app or from an external web / mobile app). Thinking about it though, I might still use server actions for the next app (because a lot of the time server actions tend to be a bit more granular and less RESTful), and create a more RESTful API using route handlers for the mobile app (or any other external app). That way you could fully optimise your next app rather than being tied into a more RESTful API which might not be optimised for the way your next app needs to fetch its data. TLDR; I'd use server actions for the next app, and create separate API endpoints / route handlers for any external apps.
@@WebDevEducation Thanks for the insights. Really appreciate. I thought I would be locked in an either-or situation, but glad to know I can still use sever actions for the web app. Thanks again
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 ...
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 TH-cam tells me this channels.
i want suggestion this type of examples const onSubmit = async (values: z.infer) => { 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.
![ละลาย (LALALYE) - DAOU PITTAYA ต้าห์อู๋ พิทยา [OFFICIAL MV]](http://i.ytimg.com/vi/wo6r9TgausI/mqdefault.jpg)
Let me know if I've forgotten any scenarios!
Nice video, thank you for posting it. Authentication id use a route handler. Not sure what you think?
This thumbnail cracked me up. The sweating guy accurately described me when faced with this decision.
😆
Thank you for the amounts of valuable knowledge you put out for free!
You're welcome 😊🙏
Concise and proper. Just as I wanted. Thanks a bunch
Glad it helped!
can you should you use server actions with tanstack query for reladiating and handling caching / loading and errors?
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?
You can use useTransition for calling server action that fetch. But generally I would use server component for data fetching
Awesome! It’d be great if you follow up with code examples in the future
Thanks a lot for your insights. I am trying to wrap my head around server actions, and I have a question related to the scenario of fetching data in a client component.
From my understanding server actions always use the "POST" method for the request sent to the backend. And using a "POST" request to fetch data, feels wrong to me. It should be a GET.
Using a server action in this scenario goes against the initial intent of this feature (data mutation) I guess, doesn't it ?
Yes you're right, altho I'd be fetching data in a server component before doing that, and passing it down to the client component if it needed to be passed down rather than directly fetching from the client component.
Another one I came across is when the payload would be over 1MB because that's what server actions are limited to.
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)
Yes that's correct 👍
@@WebDevEducation I had the same question. I am building a listing directory web app with nextjs and would like to build the mobile version of it using expo. Is it a best practice to use route handlers for the webapp and tanstack query for instance for the mobile app?
Yes it sounds like you'd want to use route handlers for this scenario which can be called from anywhere (within your next app or from an external web / mobile app). Thinking about it though, I might still use server actions for the next app (because a lot of the time server actions tend to be a bit more granular and less RESTful), and create a more RESTful API using route handlers for the mobile app (or any other external app). That way you could fully optimise your next app rather than being tied into a more RESTful API which might not be optimised for the way your next app needs to fetch its data. TLDR; I'd use server actions for the next app, and create separate API endpoints / route handlers for any external apps.
@@WebDevEducation Thanks for the insights. Really appreciate. I thought I would be locked in an either-or situation, but glad to know I can still use sever actions for the web app. Thanks again
Tom, my main man! How's it going? Long time no see haha. Thanks for the pointers. Much love x
Haha no way Richie Mac! All good here man hope things are well with you!
Very useful, thanks.
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 ...
Can we use server action in next if we have a backend in laravel?
Server actions can only be called from within a next app.
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 TH-cam tells me this channels.
i want suggestion this type of examples
const onSubmit = async (values: z.infer) => {
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.
this is self explanatory i feel, but nice vid