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

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

(00:00) Intro
(00:10) Welcome
(00:34) Discussion
(01:02) Example App
(04:52) Request & Response Details
(06:03) Final Thoughts

📚 Tutorial References:

#nextjs #server #actions

[milosnedeljkovic]

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).

[rnavedojr]

Facts. NextJs is a messy cache issue. But still the best JS Framework by far IMO.

[ayukalvieri]

The point he said "this could all change next week", made me wanna change my code to use API routes instead of server actions

[nathankrasney]

I think that you can and should use server actions to fetch data. You suggested 3 options:

1) Server fetch with component - This is overkill because I might want to consume the server action in 30 components. Why should I add UI for this using a server component?

2) API - What's beautiful with server action is that you don’t need an API.

3) Server action - You should choose this also to fetch data.

Regarding your comment about the documentation: "Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications." Using a form is perfectly suitable to fetch data using GET, so the documentation does not say you cannot fetch data with server actions—quite the opposite. You can fetch data with a form.

Your remark about POST is also not accurate. You can use POST to fetch data, for example, to avoid exposing information in the query string.

[jasekdominik]

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.

[enzo_tsx]

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.

[johnpaulpineda]

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!

[versaleyoutubevanced]

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'

[doors]

Very insightful. More Next.Js quirks please. ☝️

[NoviceNestTrader]

I've been using server actions to fetch data since they were introduced, but I've recently started switching away due to concerns about the lack of documentation on the subject.

[ziacodes]

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...

[emanuel_larini]

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?

[ChetsStore]

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.

[ilyaslife]

Another reason why using API routes instead is better is to make it easier to create a mobile app for your web app later on and have it use those API routes, I doubt you can do that as easily with server actions. It gives you more freedom when it comes to the frontend, but maybe I am wrong.

[ddkinput]

The request method is POST as we can see in header but it is actually detected as GET in the backend, I like it.

[mkroven]

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.

[김인욱-uq]

does app router project need both server action and api then? It's so confusing

[ianc]

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!

[zohaibakber]

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

[wishmeheaven]

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 😇