I struggled a lot with finding a simple and optimal way to fetch data in the client with nextjs 14, now that I saw your video I am going to start using tanstack + server actions, it is a brutal combo because it makes it easier for you to refetch and the states like loading and error, etc but above all the data caching. Thanks man ❤
@@maksymdudyk1718 Yes but Next.js only caches GET requests and if you fetch data with a server action always will be a POST request and it is not cached by default, and if you are fetching in the client is a pain in the as* caching the server action. I struggled with it.
@@maksymdudyk1718 Yes but Next.js only caches by default GET requests and if you fetch data with a server action is always by default a POST request and is not cached by default. I think the nextjs team is working on being able to change the method type of the server action but today it is by default POST
@@maksymdudyk1718 Yes but Next.js caches GET requests and if you fetch data with a server action that is a POST request and is not cached by default. I think the nextjs team is working on enabling changing the request type of the server actions but at the moment they are POST by default.
Thanks for the video it was clarifying. If you want a content suggestion, extending this video which how these patterns do or do not securely expose env vars is an opportunity. Just chirping. Thanks for the content.
you dropped the video when I needed it thanks mic!! the tanstack query is by far the best option. i've used the server action alone to fetch but it has some problem 1, it doesn't pass the error data properly 2, you can't pass the function directly to the client components
I have to tell you the tanstack + server actions is good for DX but bad for UX, server actions can't be runned in parallel so if you need to use useQuery twice at the same time it needs to wait until one is done to run the other. The solution could be api handlers but no good DX, so I think tRPC is the best
You read my thoughts bro, thats what I recently started doing once I understood that limitations of server actions. Another thing to keep in mind is that you can use pure functions if your api supports cookie based authentication. In that case, in client components, when you wanna send requests that are protected, you just pass credentials: “include”. Otherwise you need to use nextjs as proxy. As you mentioned, writing all those route handlers is hell, trpc seems to help with that.
✨ Very useful For the route API, it really makes sense to use webhooks, but we can also consider using them if our backend acts as an API. For server actions, I mainly use them for requests in server components, I avoid using them on client components because we don't have total control over sending the request. You can't cut a request made with an action server. So I think it's more interesting to use them only in server components. I think it's better to use api routes with axios or fetch (with react query of course) for client-side requests.
I’ll use API endpoints also I want to create an external API. At work we use keycloak as a auth provider then we have a Next app that handles all request to other apps. So I made API routes so clients could auth with keycloak via the CAS next app. Or if external teams need an endpoint. I’ll often do this with an internal server action then add it to the endpoint with extra checks that I don’t need internally.
i love tanstack query aswell! Thanks for the video man obs: what theme do you use and what is the screen video recorder app? (cool and fluid animations)
I’m just getting started building my first project w supabase and clerk and this vid is amazing, thanks! Is this repo public by any chance? I would love to go through your repo and study the supabase and clerk server stuff.
Thanks alot...In my case, I only use APIs for cronjob or external website consume. Other than that I use server actions with zod validations and I would appreciate it if you drop a video on how to use tanstack query with server actions in client componenets
Congrats! It's an excellent video! What about the cache layer benefit of using the extended fetch API from Next.js? I'm using API endpoints for webhooks like you and the GET method to take advantage of the fetch web API cache on the server components to prevent unnecessary database requests.
Going to mention that in the video, u do lose the caching... also I think its better to fetch in a server component vs a server action if page is server rendered
Boss man, I was wonderkng why you didn't mention passing the server action to the "action" attribute of a form tag and the button submits the form? This is how I understood server actions to work from the Vercel video they dropped when the feature released
Love it. Creating a custom hook adds another step as you're still using an action to fetch the data, so is it's core purpose to add error handling in this situation?
Might as well just fetch the data using the server action and pass the userID? const PortfolioList = async ({ userId }: { userId: string }) => { const items = await fetchPortfolioItems(userId);
If document page access is restricted by authentication then what is the point of checking auth again inside getAllDocuments action function? thank you
Actually that was quite rude of me… I didn’t even mention your video itself. I thought it was very interesting and useful. Thanks for making this content. 🤘
You can actually remove the "use server" flag from your server actions that fetch data, because they are server components by default. Plus removing the flag turns all data fetching functions into GET requests instead of POST which is the default for server actions.
Doesn't hurt to be verbose. There's a handful of functions that, if used in your component, make it client sided. So if you accidentally use those, it'll throw you an error right away
server actions run sequentially, so if you have 2 requests being fired at the same time, the second request will wait for the first one to finish, and that is really bad. I think api routes are the best
How do you handle loading state from server actions triggered inside a button's onClick? At that point I believe you'll need react-query again and the fetching will occur client-side.
If you need some information only on the clientside would you collocate all the function logic inside of the custom hook /react query or would you ratther still create a server action to only be consumed on the client by that unique custom hook thats a react query wrappper?
A lot of developers bash Nextjs like its a bad framework and hard to maintain. Lol😅, its because they are treating it like a server its ment for client side. You'll need a separate backend to make the most of Nextjs
Why are you using server actions to perform GET operations in a server component? Can't you just run the logic inside the server component? I believe server actions should be used for mutations if in server components.
