Why I Don't Use Next.js Server Actions to Fetch Client-Side Data

you can fetch data in a nextjs client component with a server action but should [Music] you hello and welcome I'm Dave today we'll look at why I don't currently recommend fetching data with server actions in nextjs and some good Alternatives and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there last week I published a subscriber question and answer video and one of the questions was about server actions I answered and highlighted that the docs recommends server actions for form submissions and data mutations that said some comments on the video also pointed out that you could fetch data with server actions I had heard of this but it seems to go against the definition of server actions in the docs so I hadn't explored it further at that time but this week I decided to check out all the details I've got a simple nextjs application here and it uses Shad CN tabs and it displays three different ways you can fetch data and provide it to a client component you can see the first one is a server fetch so if I reload the page suspense kicks in gives a loading message for 3 seconds because I built in a delay and then it displays the username now if I go to the API route instead of fetching that data on the server immediately and then passing it down to the client component like we have in this first example it's going to load the client component suspense kicks in because I have a fall back and then it's going to request data from an API route a route Handler in nextjs it's going to get that user data and then display it I also have a clear cache button that you can clear the cache and then of course it's going to need to fetch that data once again when you come back to this component here in this tab now the server action is very similar to the API route but instead of fetching data from the API route it's going to call a server action in the client component and get that data so let's click on that you can see suspense once again kicks in then it will display a username as well so after that it works much like the API route does but should we be using a server action to fetch data that's not really dis discussed in the nextjs documentation or the SWR documentation and I don't think it's in the react query documentation either which you could also use instead of the used SWR hook however it does work so let's look at how it works hey guys I hope you're enjoying the video you may be surprised to learn that three out of every four viewers nearly 75% of all people who watch my channel aren't subscribed so I just wanted to take a quick second and remind remind you to hit that subscribe button it really helps me out and if you really like my videos you can get exclusive content and support my channel even more by joining my patreon at patreon.com DAV gray thanks for your consideration and now back to the video I'm in vs code and I've got my actions. ts file open and you can see this simple server action that I've created called git user action and it's bringing in a g user function that actually requests that data and that's the same function that I in example one that requested data on the server and then passed it down to the client component so the server fetch example however this server action example uses a server action function now it requests user data inside of that server action and it simply returns it so let's look at the component that uses the server action and you can see it's a client component I'm bringing in the uswr hook here at the top then I import the server action as well I also have that clear cache button that will clear the cache for SWR if you want to and after that it requests data using the use sswr hook and we pass in that server action and I gave it a key for the cache a cache key with the same name called get user action so that's basically it after that it gets the data and displays it and this does work so should we follow this pattern I know some definitely want to if we look at the second example that I have ad it's almost the same with the uswr hook except it uses a fetcher function and it requests data from the API route now this is well documented and it's what I lean towards because of that documentation and really it doesn't seem to the documentation doesn't seem to recommend using a server action to fetch data at this time back in the browser we can inspect the network request that the server action sends so I'm going to click on that and I'll scroll here we don't have a lot of room to check it out in my current setup but the request method is post and a server action always uses the post method so that can also feel a little strange requesting data essentially getting data we would usually use a get method and that's what the API route chice would use but this uses a post method for the server action other than that SWR is going to ignore some of the cache control headers but a browser would honor these and this also is a little bit different because a cash control here is no store meaning you shouldn't be storing this data if you're honoring the cache control header however SWR does indeed cach this data so when we navigate back and forth if I click API route it's not waiting and displaying that suspense again it's immediately showing the name it's stale while revalidate so it shows the stale data and it revalidates in the background I click the server action the same thing so you can tell it is indeed cashed so what do you think about this are you comfortable without much documentation uh actually no documentation at this point or fetching data with a server action do you feel okay about requesting data with a post method and ignoring the cache control headers for now I'm going to use the first two examples in my applications either fetch data on the server or I'm going to use a route Handler until there is some more documentation because as we know with nextjs this could all change next week how do you feel about all this let me know in the comments hey guys giving a quick shout out to my patrons holy coder is a progress provider and lad is a member at the senior level also thank you to all of the junior members you're all helping me reach my goals and if you haven't checked out my patreon it's got exclusive content and early release content and it's not one of those patreons that doesn't get many posts I'm active on there every week so please check it out if you haven't remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 21,868

Keywords: server actions, nextjs server actions, next server actions, next.js server actions, next js tutorial, next 14, nextjs 14, next js 14, next js, fetch data, fetching data, swr, useswr, react query, swr server action, useswr server action, react query server action, fetch server action, fetching with a server action, server action to fetch, fetch data with a server action, how to fetch with a server action, fetching with server actions, get data, get data with server actions

Id: O8AmIELoxrc

Length: 7min 23sec (443 seconds)

Published: Tue Apr 02 2024