Nice Explanation Sir . I also feel , it is more of an intuitive approach than a practical one to add server actions in Next JS but once you get used to it , it makes it way easier to handle api calls and manage the integration stuffs. Loved this video and I must say , i am enjoying this journey of Next JS with you. Thanks and Keep going Sir.
Thank you. Got a bit of mixed feelings as server actions seems to be mixing concerns. They were imagined to replace API endpoints - data mutation, but now we also do revalidation and this adds a layer of magic because what actually a call to server action returns is not just what we explicitly return from it.
Thanks for this amazing explanation. I have a confusion. When to use fetch/axios and when to use actions? Or they can be used together? For example, if i consider jsonplaceholders APIs as API points which approch should be followed in the nextjs api for data fetching? I'm some what confused between these. You can correct me if my question is wrong. Thank you.
@@lonewolfdays when you have an external API to call, you will not use server actions. That time you will have two approaches: 1. From the Server component you can fetch the data directly from API using the fetch() and use. 3. If from the client component then you can use the useEffect() hook to handle API calls and responses. On the contrary, server actions are simple functions that are asynchronously executed on the server and you can call them with the 5 patterns I mentioned in the video. I hope the diff is clear to you now.
Thanks again Tapas for this information. I have a question, if I want to use a dedicated express server for my backend and I use 'server actions' to make the API calls to maintain these calls on the server, is it really consuming? Am I wrong doing this?
Thank you! If you have a dedicated server self-managed, it's not an issue. The problem comes when we have a cloud hosted server that charges on execution based on bandwith and time.
When you use a server action will the call towards the node server be shown in the web inspector's network tab? I swear I am doing everything correctly but I get that the JSON isn't serializable - I've even reduced it down to just a string I'm passing. Also, how come you aren't using the .bind() approach mentioned in the next.js docs? It's like you are skipping some of their patterns
Hey Man, I hope your problem is solved by now. No we can not trace them like regular http/network calls in DevTools. One way to inspect them is if you have a middleware there you can check out the values being passed. If it is just string, I do not see a problem at all... as a double check, please re-look how are you extracting the form data or adding anything additional to the server action apart from the form data. About the .bind(), it is not necessarily a server action thing, that's plain old JavaScript. However, I agree with you that it will be good to capture it, I shall make a smaller video on it soon. Thanks!
@@tapasadhikary Thanks for reaching out, it was actually that I had the content-type of the request on the wrong level either in or outside the headers.... i was going crazy haha thanks!
sir, I'm facing an issue related to api in next js. I have made api under src/app/api... that api is getting data from mongo db atlas... and fetching that api on /home route. Running locally is everything good. But when deployed to vercel or heroku, and then I fetch that api, it always gives the old data that was in the db while the time of deployment... Even if the data is updated on the db, still it gives the old data. How should I fix it? Or these platform does not support giving dynamic data.?
@@tapasadhikary Sir the issue is solved. I just used the req object inside the api route - let a = request.url... However the a variable is not used anywhere.
I am making an end to end app where a Node.js and Express Service will create the auth token and refresh token.. and at the Next.js end the next-auth will be regulating the tokens and all other API services will go through that. There will be multiple videos for that app.. and some of them will available to view as I progress.. some part may be member-only too as it takes a lot of efforts to cover everything, hope you understand. Rest all are covered here.
You are just doing an awesome work. You literally spoke about some extremely imp things, that's very imp to note
@@soumyajeetdas5339 Thanks a lot ❤️
Great great I love it i wached it very carefully and very being fosued. thank you vai I learnt so much
@@mdsumonh.shohan9159 Thank you very much ❤️
Super Helpful video Dada, Thanks ❤
Thanks vai.. somehow your message was blocked by YT, donno the reason.
Informative video, Thanks for sharing with us.❤
You are most welcome ❤️
Nice Explanation Sir . I also feel , it is more of an intuitive approach than a practical one to add server actions in Next JS but once you get used to it , it makes it way easier to handle api calls and manage the integration stuffs. Loved this video and I must say , i am enjoying this journey of Next JS with you. Thanks and Keep going Sir.
Thanks for adding to it. Yep, I'm also enjoying making it a lot 😀
Thank you so much sir😊
Welcome ❤
Thank you. Got a bit of mixed feelings as server actions seems to be mixing concerns. They were imagined to replace API endpoints - data mutation, but now we also do revalidation and this adds a layer of magic because what actually a call to server action returns is not just what we explicitly return from it.
I second that opinion 👍
loving your contents!
Thanks a lot ❤️
Great video as always, very informative and motivational!
Thanks a lot… hard work pays off when you love it ❤️❤️
it's a great content
Thank you ❤️
Great video once again!
Thanks a lot ❤️
Informative tutorial.. ❤❤❤
Thank you
Thanks for this amazing explanation. I have a confusion. When to use fetch/axios and when to use actions? Or they can be used together? For example, if i consider jsonplaceholders APIs as API points which approch should be followed in the nextjs api for data fetching? I'm some what confused between these. You can correct me if my question is wrong. Thank you.
@@lonewolfdays when you have an external API to call, you will not use server actions. That time you will have two approaches:
1. From the Server component you can fetch the data directly from API using the fetch() and use.
3. If from the client component then you can use the useEffect() hook to handle API calls and responses.
On the contrary, server actions are simple functions that are asynchronously executed on the server and you can call them with the 5 patterns I mentioned in the video.
I hope the diff is clear to you now.
Very helpful tutorial sir.
Thank you ❤️❤️
Thank You Sir
Most welcome
Great Informative Video Brother. One Doubt is why we not used timestamps and used createdAt instead in the video ?
Thanks brother ❤️, yes! We can do timestamp: true as well to add createdAt, modifiedAt. Please feel free to use that too 👍
@@tapasadhikary Thankyou So Much
Thanks again Tapas for this information. I have a question, if I want to use a dedicated express server for my backend and I use 'server actions' to make the API calls to maintain these calls on the server, is it really consuming? Am I wrong doing this?
Thank you!
If you have a dedicated server self-managed, it's not an issue. The problem comes when we have a cloud hosted server that charges on execution based on bandwith and time.
When you use a server action will the call towards the node server be shown in the web inspector's network tab? I swear I am doing everything correctly but I get that the JSON isn't serializable - I've even reduced it down to just a string I'm passing. Also, how come you aren't using the .bind() approach mentioned in the next.js docs? It's like you are skipping some of their patterns
Hey Man, I hope your problem is solved by now. No we can not trace them like regular http/network calls in DevTools. One way to inspect them is if you have a middleware there you can check out the values being passed. If it is just string, I do not see a problem at all... as a double check, please re-look how are you extracting the form data or adding anything additional to the server action apart from the form data.
About the .bind(), it is not necessarily a server action thing, that's plain old JavaScript. However, I agree with you that it will be good to capture it, I shall make a smaller video on it soon. Thanks!
@@tapasadhikary Thanks for reaching out, it was actually that I had the content-type of the request on the wrong level either in or outside the headers.... i was going crazy haha thanks!
sir, I'm facing an issue related to api in next js.
I have made api under src/app/api... that api is getting data from mongo db atlas... and fetching that api on /home route.
Running locally is everything good.
But when deployed to vercel or heroku, and then I fetch that api, it always gives the old data that was in the db while the time of deployment...
Even if the data is updated on the db, still it gives the old data.
How should I fix it?
Or these platform does not support giving dynamic data.?
@@Pushkarcdn fetch is memoized in production. Make sure to use a cache revalidation strategy or cache no store strategy.
@@tapasadhikary I've already used this:
const response = await fetch('/api/messages',
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-store',
},
})
@@Pushkarcdn Are you also using unstable_noStore?
@@tapasadhikary Sir the issue is solved. I just used the req object inside the api route - let a = request.url... However the a variable is not used anywhere.
upto 32:06 and wake me up!
What does it mean? 😃
@@tapasadhikary Hehe I know I will be busy on my college project. So somebody has to inform me to finish this tutorial. That's why
Has this course ended or ongoing?
I am making an end to end app where a Node.js and Express Service will create the auth token and refresh token.. and at the Next.js end the next-auth will be regulating the tokens and all other API services will go through that. There will be multiple videos for that app.. and some of them will available to view as I progress.. some part may be member-only too as it takes a lot of efforts to cover everything, hope you understand. Rest all are covered here.
make some video also in Bangla so we can understand better
yep, sure. Please watch out @tapascript-bangla for Bangla videos. Thanks!
Tomorrow is my exam why i can't skip this tutorials❤🩹
Exam first 😊😉
@@tapasadhikary will be back for sure dai💯!