Fetching Data with Nextjs | 3 Different Patterns

In this video, I share with you all the different patterns I use when fetching data on Nextjs.

[caceresjuan]

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 ❤

[CodeZakk]

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

[ktran]

You’re cooking bro, love these videos

[isdartho]

Love how you clearly explain everything <3 Thank you for your videos.

[Alex-bcxe]

This is actually super important thanks.

[bodywithoutasoul]

Thank you for this! It was short and informative. Love it. Keep ‘‘em coming!

[yadav]

great video man cleared alot of doubts re. fetching data in nextjs

[causecaos]

These videos are killer, thanks for putting these out! Super useful

[seifghost]

i am rly glad i found ur channel
thanks for all the useful content u had

[xvonovd]

that unpaid line got me ! in fact my first internship was unpaid but currently doing a paid, now looking for a full-time role.

[loganford]

these videos are amazing, keep them coming!

[thezeeshannn]

hey bro thanks for this video
i was struggling to connect react query and next js

[MarcoPredari]

Keep going bro! You are doing awesome content.

[lemonaderock]

I would also recommend prefetching a query on a server, and then pass it with Hydration Boundary

[julianrizo]

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

[justinlinn]

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.

[onlinenk]

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

[julienheng]

Great video! Thank you!

Btw what theme are you using for vsc?

[eduardomoraesrigo]

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)

[primostasis]

as long as you don't use the data outside the application ex - mobile / other web then server actions and react query is the best pattern