Why I Don't Use Next.js Server Actions to Fetch Client-Side Data
Рет қаралды 21,738
Күн бұрынWeb Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this Next.js tutorial, I share why I don't use Next.js Server Actions to fetch client-side data. We'll look at how you can fetch data in a client component with a Next.js server action and alternative options, too.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
🔗 Source Code Example: github.com/gitdagray/nextjs-d...
🔗 My Next.js Videos: • Next.js Tutorials for ...
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Why I Don't Use Next.js Server Actions to Fetch Client-Side Data
(00:00) Intro
(00:10) Welcome
(00:34) Discussion
(01:02) Example App
(04:52) Request & Response Details
(06:03) Final Thoughts
📚 Tutorial References:
🔗 Next.js docs "Server Actions & Mutations": nextjs.org/docs/app/building-...
🔗 MDN Cache-Control: developer.mozilla.org/en-US/d...
Was this tutorial about fetching data with Next.js Server Actions helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #server #actions
@rnavedojr 3 ай бұрын
Facts. NextJs is a messy cache issue. But still the best JS Framework by far IMO.
@milosnedeljkovic3737 3 ай бұрын
The biggest drawback that I found in using server actions to fetch the data is that Next seems to have a built in queue for server actions requests. That means that server action requests are sent to network strictly sequentially, one by one. That also means that you cannot really fetch the data in parallel (for example, in two unrelated client components in the hierarchy).
@DaveGrayTeachesCode 3 ай бұрын
Great observation!
@N7Tonik 10 күн бұрын
does it just SEEM like it or you actually know it?
@salman0ansari 5 күн бұрын
how do you know?
@johnpaulpineda2476 3 ай бұрын
Hi Dave, wassup? I've been a subscriber since 50k. I'm so very glad you're already close to 300k. Keep up the good work Dave!
@DaveGrayTeachesCode 3 ай бұрын
Thank you! 🙌
@wishmeheaven 2 ай бұрын
You mean: "Keep striving for progress over perfection".. 😏
@ayukalvieri3154 3 ай бұрын
The point he said "this could all change next week", made me wanna change my code to use API routes instead of server actions
@jaatjii7823 3 ай бұрын
Do fetch data on server components and then pass it to client components.Server actions are good to use.😊
@DaveGrayTeachesCode 3 ай бұрын
Those are two different things. Fetching data on the server and passing it to a client component is what I did in example one. Using the server action was example three.
@jaatjii7823 3 ай бұрын
@@DaveGrayTeachesCode hi sir…big fan❤️❤️❤️
@jaatjii7823 3 ай бұрын
@@DaveGrayTeachesCode if you pass objects form server components to client components make sure to stringfy the data as it gives some unusual errors.
@DaveGrayTeachesCode 3 ай бұрын
@@jaatjii7823 true. You usually send JSON data. In the server fetch example, I pass a simple string.
@learner8084 2 ай бұрын
I'm learning a lot from you. Thanks very much. I wonder if I should use React Hook Forms ? I'm previously using formik, MUI with React. But moving to Nextjs, I'm moving to also to ShadCN, Tailwind. ShadCN has Form component and it works with React Hook Forms. Should I move to this as well ?
@mdhaiderhossain 2 ай бұрын
I think the next.js 14 server action and cache validation are not good because a few months ago i worked on a project where i had to use complex data queries for fetching data, and that worked very well, but the problem was that when i tried to revalidate the data, it was not working properly, & the next.js were calling the API infinitely in the network tab, but when i moved the scroll mouse on the window a little, it had been stopped. I have some more problems, and i have tried many times to solve them, but i can't. What do you think ? is next.js perfect for complex project?
@enzocodes 3 ай бұрын
Hello Dave! Adding up to the mentioned in the video, I think using api routes is better if you plan to scale your app and consume the api from a mobile app. It gives more versatility, also if you are developing an app that will serve as an api for other apps, api routes is the way to go. In conclusion api routes give you more control for different scenarios.
@DaveGrayTeachesCode 3 ай бұрын
Yes, API routes can fit more needs. And without the documentation stating that server actions are for fetching, I hesitate to use them that way. I'm sticking with API routes when fetching from a client component for now as well.
@7doors847 3 ай бұрын
Very insightful. More Next.Js quirks please. ☝️
@DaveGrayTeachesCode 3 ай бұрын
Thanks!
@ChetsStore 3 ай бұрын
Is there a way to utilize an API developed within my Next.js application? I've heard that it's impossible to access the data that comes from internally written API routes after deployment while everything works fine locally. Within API routes, I can only fetch data from external APIs.
@SomeRandomDev-dx2te 11 күн бұрын
Hello Dave, is it considered a good practice to fetch data in server component and pass it to the client component as a props?
@ZiaCodes 3 ай бұрын
Yes, I also thought about it and I'm using react-query to do a client side fetching for client components and inside that queryFn, I'm passing the server action...
@DaveGrayTeachesCode 3 ай бұрын
It does work. I'm just not ready to start using server actions for data fetching due to the reasons I give in the video. I do use them for form submissions and data mutations.
@versaleyoutubevanced8647 3 ай бұрын
If you wrap the server action promises in a useQueries and mutations, this would give you the cache control and the states around the promise state, like a tRPC Queries Server actions is a good primitive that should not be exclusive only to mutations, they should work around that or create something like 'use server query', 'use server mutation'
@DaveGrayTeachesCode 3 ай бұрын
Great points!
@jasekdominik 3 ай бұрын
I personally use this. The biggest benefit is full typesafety. This basically makes tRPC obsolete. Caching can be handled via react-query. The downside of this approach is debugging in the devtools. It's not clear which server action is called, what is the payload and the response. I hope there will be some extension for making this more convenient.
@DaveGrayTeachesCode 3 ай бұрын
I agree there are possible benefits. I'm just being cautious for now. I would like to see it supported with full documentation.
@zacharyshifrel9107 3 ай бұрын
I’m using an express server, and sometimes I’m using useEffect to fetch, but for more expensive stuff I’m using async fetch functions in server components which seems to work fine for now. Do you think this is alright?
@DaveGrayTeachesCode 3 ай бұрын
Yes, although I would choose SWR or React Query over useEffect in client components. A fetch function in a server component is the first method I show (aka Server Fetch) in this video. It's best when possible.
@user-wf4pr1jx8l 3 ай бұрын
Great video! I have a situation where user would submit a form and i need to make POST request to an API which would return data. In that case, i am using server action and it works but I'm confused on whether i should be going that route or not. I would really appreciate your recommendation on this.😊 Thanks
@DaveGrayTeachesCode 3 ай бұрын
Yeah I think that is fine. Server actions are meant for form submissions.
@MrRedwolf. 3 ай бұрын
I have two components. Like mobile view component and monitor view component.Both same actions and content but design wise they have lots of changes.. using display property i can hide the components and show based on screen size. However it was big content assuming if we open the nextjs application in pc the mobile view component also renders into dom. But i want to improve our performance, so i want to render the components based on screen size during the dom mutation in react . So how to implement it. Can you please help me?
@DaveGrayTeachesCode 3 ай бұрын
To do anything based on the screen (viewport) size, you will need to have a client component as a parent to the other components. Calculate the size from the window object - but caution! - this will throw an error in Next.js unless you do it inside a useEffect because even client components are prerendered on the server first. You can use React.lazy to import the child components to help minimize the bundle size, too.
@fscubetech7219 3 ай бұрын
The great content.
@DaveGrayTeachesCode 3 ай бұрын
Thank you!
@fathur208 3 ай бұрын
Why you should fetch from server action? Is server action purpose to mutate the data? Because if we mutate the data from api route, revalidatePath doesn't work for fetching in server component except you hard reload the browser or use window.location.replace
@DaveGrayTeachesCode 3 ай бұрын
Sounds like you are agreeing with me. I am not recommending to use a server action for fetching data even though it is possible.
@wishmeheaven 2 ай бұрын
Thanks! It might be a bit off topic, but if I may offer a couple of most desirable tutorial series: 1. Astro. 2. React v19 (at least SSR, new "compiler", new concepts..) A man can only hope, But even if it won't fulfilled - Thank you for everything, Dave 😇
@DaveGrayTeachesCode 2 ай бұрын
Thanks for the requests!
@zohaibakber3056 3 ай бұрын
It totally depends, for instance I use a server action to get presigned url for file uploads to s3, which is much better than api route implementation tbh
@DaveGrayTeachesCode 3 ай бұрын
It definitely works. That's why I wanted to show it here. That said, I also wanted to highlight some issues. It would be nice to see more documentation or at least acknowledged support. Right now, it feels like we're on our own and decisions could be made to break this at any time.
@PraiseYeezus 3 ай бұрын
oh, this is a good usecase I hadn't thought of, thanks
@Harshit.git911 3 ай бұрын
well said
@DaveGrayTeachesCode 3 ай бұрын
Thank you!
@emanuel_larini 3 ай бұрын
What's the point of using a SSR framework to fully rely on CSR? I do understand if you use react-query for query revalidation, but putting it to make even the initial request isn't just like going back to "old" react?
@DaveGrayTeachesCode 3 ай бұрын
Never said I was fully relying on CSR. My preference is "Server Fetch" - example 1 in the video. However, there are times when you need to request data inside a client component. When I need to, I'm not going to use server actions yet.
@emanuel_larini 3 ай бұрын
@@DaveGrayTeachesCodeI didn't mean you said it, sorry about it But shouldn't you just use RSC for those fetches? I think Vercel is exposing too many patterns to everyone without providing a guidance. Sounds very much like what the react team did with react itself, which is a big fail imho
@DaveGrayTeachesCode 3 ай бұрын
@@emanuel_larini I use RSC whenever possible. This video has contrived examples to show each possibility. That said, I again say there are some instances where you want to fetch more data in a client component after the initial load. This is when I reach for an API route - only when fetching from a client component is deemed necessary.
@AmodeusR 3 ай бұрын
Isn't server actions supposed to be used in a form through the action property?
@DaveGrayTeachesCode 3 ай бұрын
That is not the only way they can be used. However, some are using them to fetch data, and while possible. I'm not currently going that far.
@mkroven 3 ай бұрын
If I need personalized data and need auth cookies I use client data fetch, if I need non frequently changing data and I dont need cookies I use server actions to fetch data. Vercel is pushing too hard NextJs limits to lower compiling and serving its apps. This is irritating devs from react. I am seriously waiting prod-ready versions of rust web frameworks like dixous or leptos to jump on. And Dave, I love watching your videos. Thank you.
@DaveGrayTeachesCode 3 ай бұрын
I understand! And thank you for the kind words!
@maskman4821 3 ай бұрын
I love Nextjs 14，it is so cool and easy to use ❤🎉
@ianc6418 Ай бұрын
I'm new to this, I don't understand why server actions are there at all, maybe they are intended to replace the "action" property on forms, but aren't fully fleshed out yet? But if I can keep doing requests without it then I'm not gonna worry about it. Thanks for the example!
@DaveGrayTeachesCode Ай бұрын
You're welcome!
@AlphaHydrae 18 күн бұрын
The real question is does a server action fetching data work with JS disabled in the browser? If it does then it seems like there's a progressive enhancement use case there.
@DaveGrayTeachesCode 16 күн бұрын
I like this question. It wouldn't work with something like useSWR or React Query - but maybe triggered with a form.
@nasko235679 21 күн бұрын
The one thing I still don't understand is how to fetch data SECURELY from a client component? What I mean by securely is checking for authentication/ authorization before providing the data. Are API routes still the way to go for that? Because using server actions is not meant for that purpose as you said (and they are getting queued) and simple helper functions won't work for the authentication part is just making an API route and doing the authentication/authorization check there the way to go? And yes I know you can fetch data from a server component and pass it down as props but that works for more static data, but if you need something more dynamic you kinda have to do it clientside.
@DaveGrayTeachesCode 20 күн бұрын
Yes, I check auth in every API route. I also check auth in server actions when doing mutations.
@Tausif_Khan_07 3 ай бұрын
Hi sir, please make a video on microservices architecture it's implementation and deployment process please.
@DaveGrayTeachesCode 3 ай бұрын
Thanks for the request.
@stephenchukwuani9481 3 ай бұрын
Traversy media just made a video
@aodflash 3 ай бұрын
if its stable in 14, then It should be fine?
@DaveGrayTeachesCode 3 ай бұрын
Server actions are stable but as I highlight in this video, they are stable for form submissions and data mutations. There is no documentation for directly fetching data with a server action.
@suhailabdulla946 3 ай бұрын
The GitHub link is not working ??
@DaveGrayTeachesCode 3 ай бұрын
Thanks! I'll have to check this.
@DaveGrayTeachesCode 3 ай бұрын
Got it working now: nextjs.org/blog/security-nextjs-server-components-actions
@John-eq5cd 3 ай бұрын
Why is there a hesitation about fetching data with a server action, but not about mutating data with a server action? Is it simply when we fetch data we get it from the server and present it in the client whereas with mutating, we are updating, but not necessarily getting data from the server?
@DaveGrayTeachesCode 3 ай бұрын
When mutating data, it is usually a form submission. You can call server actions without a form submission, but then you are likely just looking for a success or fail response - possibly with useOptimistic having already updated the UI. Absolutely, no documentation or recommendation in the docs to fetch initial or polling data with server actions.
@gravellife5643 3 ай бұрын
@@DaveGrayTeachesCode I have playSlot($backgroundPositions) server action calling from client component. This action return win amount and new symbols positions where to stop slot animations calculated on server. On server I keep current game data in redis json. Its working just fine.
@maxpayne9074 3 ай бұрын
Source code example link don't work
@DaveGrayTeachesCode 3 ай бұрын
Got it working now: github.com/gitdagray/nextjs-data-fetching
@27sosite73 3 ай бұрын
damn, it is my comment thank you mate you are the best
@DaveGrayTeachesCode 3 ай бұрын
Thanks! And thanks for the comment that made me investigate further!
@zedroofficial 3 ай бұрын
then which is better ?
@DaveGrayTeachesCode 3 ай бұрын
All 3 approaches work here. I explain why I'm not using a server action to fetch data from a client component yet.
@zedroofficial 3 ай бұрын
@@DaveGrayTeachesCode then which one is you using?
@DaveGrayTeachesCode 3 ай бұрын
In the video, I said I am using the 1st two examples to fetch data but for now, I'm not fetching data with server actions. Give it a watch :)
@karthikkhoday5555 3 ай бұрын
Server action are not nextjs feature but react feature, react is improving and new features are added, this actions will stay cause it makes stuff soo simple
@DaveGrayTeachesCode 3 ай бұрын
I like them. I'm just not ready to fetch data with them yet in Next.js without more documentation and assurance they won't change how it works within the framework. They are stable for form submissions and mutations. If React (without Next) offers data fetching documentation for server actions, please share. I'm going to look, too!
@planesrift 3 ай бұрын
I feel that Next.js is a bit overengineering. Anyway, I think why server action works that way is because it is a workaround for server component by nature.
@DaveGrayTeachesCode 3 ай бұрын
Agreed. I'm just not comfortable with fetching data using a server action until it's documented. Otherwise, they could make a change that breaks it next week.
@incarnateTheGreat 2 ай бұрын
I learned using a Sever Action to retrieve data and did not like it. Not long after, Lee (or someone else) had released a video explaining that you can co-locate your page.tsx file to have the default function make a server-side call to an async function that retrieves the data using fetch in a try-catch. Honestly, I much prefer this method over Server Actions. Server Actions should be reserved for things such as Form actions.
@DaveGrayTeachesCode 2 ай бұрын
Yes, server component fetch is the way to go. If you need to fetch _more_ data after the server fetch while staying on the same page - maybe on-demand product details or similar - the choice becomes server action or API route.
@IINoirII 3 ай бұрын
I guess, App router is not even ready for production...
@fathur208 3 ай бұрын
I think so, server action can't handle complex form. So for now i use antd Form to handle server action with complex form
@DaveGrayTeachesCode 3 ай бұрын
I'm using the App Router in production. I'm just not recommending that you fetch data with a server action. Server actions are good for form submissions and for mutating data.
@fathur208 3 ай бұрын
@@DaveGrayTeachesCode How do you perform complex form submission, such as if the form contains data input array of objects?
@sudhanshubhagwat9538 3 ай бұрын
@@fathur208as far as I know, this cannot be done right now with form actions
@oscarljimenez5717 3 ай бұрын
@@fathur208you have ways, but if you don't wanna go to hard, just make it client component using a Form Library and use the server action there.
@togya4 3 ай бұрын
Dave pleaseeeee leave the src code
@togya4 3 ай бұрын
Its giving 404 in github@@DaveGrayTeachesCode
@DaveGrayTeachesCode 3 ай бұрын
Here it is: github.com/gitdagray/nextjs-data-fetching
@weirddev 3 ай бұрын
It does not feel good
@DaveGrayTeachesCode 3 ай бұрын
Agreed
@jasonjimenez9116 3 ай бұрын
it all boils down to best practices. nextjs should be up front what their intention with server actions, what problem they are trying to solve. otherwise it is better to play it safe coz right now nextjs14 looks like an unfinished experiment. generating a server and client on one code base is really a stretch IMO. the fact that dev and prod build dont yield same behavior is a red flag.
@DaveGrayTeachesCode 3 ай бұрын
Many agree!
@user-re7zb6oo2s 3 ай бұрын
What nonsense I just heard. Server actions are needed for forms or changing data, not for receiving it. That's why there is always POST and not GET. In hooks like useSWC/useQuery asynchronous functions are executed anyway. And to get data, server-side components are used to get the initial data for quick display, and then different functionality is implemented. useQuery even has an initialData field for such cases.
@DaveGrayTeachesCode 3 ай бұрын
Sounds like you agree with me. If you "heard" this, it means you listened to the video, right? I agree with "not for receiving it" which is why I'm not using server actions to fetch data even though it is possible.
@user-re7zb6oo2s 3 ай бұрын
@@DaveGrayTeachesCode Ideally yes, I heard it wrong. I first thought you were wondering why you can't use server actions to retrieve data. About the POST thing, I thought you were wondering why server actions have a POST method and not a GET method.
@jt71955 3 ай бұрын
No sorry Dave?@user-re7zb6oo2s
@user-ec9kn7id1n 3 ай бұрын
Dave speaks better as a native speaker
@chrisr2063 3 ай бұрын
I use server actions in my context. Fight me
@DaveGrayTeachesCode 3 ай бұрын
😂 to each their own!
@shawnxiong2011 3 ай бұрын
server action is too much magic, it's a good experimental feature to play, and used for casual project, definitly no go to real product for me.
@DaveGrayTeachesCode 3 ай бұрын
I like server actions for form submissions and data mutations. I'm just not ready to fetch data with them yet as it doesn't seem to be an intended (or documented) use.
@vitosnatios 3 ай бұрын
Server actions are stable.
@shawnxiong2011 3 ай бұрын
@@vitosnatios yeah, Nextjs recently claim many features as stable releases, but as general practise not to rush the new features into production.
@kenshinhimura3140 3 ай бұрын
My friend there is no tutorial on internet about csp on next js 😢
@DaveGrayTeachesCode 3 ай бұрын
Found this: nextjs.org/docs/app/building-your-application/configuring/content-security-policy
@kenshinhimura3140 3 ай бұрын
@@DaveGrayTeachesCode 😑 Every body don't care about csp in fact. I read the doc and I talk with the vercel staff and same thing they don't care about security. Fuck nextjs
@kenshinhimura3140 3 ай бұрын
Tell me how to refresh a server component in the user screen without refresh the page and without react query? I use revalidatePAth but on the screen the server component did not refresh without refreshing the screen. Help me and I subscribe and I make a donation to your patreon 😊
@joyahmed1269 3 ай бұрын
revalidate
@kenshinhimura3140 3 ай бұрын
@@joyahmed1269 with revalidatePAth and others data will be refresh in the server but not on the user screen, you will need to refresh the browser, that is what we don't want
@DaveGrayTeachesCode 3 ай бұрын
@kenshinhimura3140 Here you go: github.com/gitdagray/server-action-todos ..follow the directions in the README. This will add new todos to your database and displayed list without refreshing the page and without react query or swr. Bonus: it will continue to work even if you disable JavaScript.
@kenshinhimura3140 3 ай бұрын
@@DaveGrayTeachesCode thanks Dave Great
@heracraft5526 3 ай бұрын
import { useRouter } from "next/navigation"; const router=useRouter(); whenever you want to refresh the server component, for example you want it to re-fetch some data to show updates call `router.refresh()`. I hope this works for you
@jouiedomar1922 3 ай бұрын
How to secure POST handler function using csrftoken like what Django doing?
@DaveGrayTeachesCode 3 ай бұрын
When you POST data using a Server Action, it is very secure because it is not using an API route URL at all. It uses an imported server action function. I do recommend server actions for posting form data in Next.js. Django uses a CSRF token because it does POST to a traditional URL. Django wants to confirm that POST is coming from the intended website.
@jouiedomar1922 3 ай бұрын
@@DaveGrayTeachesCode thank you dave, but there is a way to do this (csrftoken validation) in nextjs as well?
@DaveGrayTeachesCode 3 ай бұрын
This Next.js blog article talks more about CSRF and Next.js: nextjs.org/blog/security-nextjs-server-components-actions
Dave Gray
Рет қаралды 28 М.