TanStack Query and Next.js with REST API (data fetching preference)
Answered
Arboreal ant posted this in #help-forum
Arboreal antOP
Still new to Next.js.
The web application will instead have a REST API for the actual backend stuff,
According to the moderator, if I will fetch via REST API, it is better to use stuff like TanStack query instead of server actions.
This weekend I went over the docs of TanStackQuery.
Which is the preferred way or the recommended way for Next.js + TanStack Query in this case?
Prefetching (https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-app-prefetching) or streaming (https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-suspense-streaming) ?
The web application will instead have a REST API for the actual backend stuff,
According to the moderator, if I will fetch via REST API, it is better to use stuff like TanStack query instead of server actions.
This weekend I went over the docs of TanStackQuery.
Which is the preferred way or the recommended way for Next.js + TanStack Query in this case?
Prefetching (https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-app-prefetching) or streaming (https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-suspense-streaming) ?
Answered by B33fb0n3
yea, fetch in server components and pass to your component (no RQ needed). Else just
useQuery from RQ inside client components7 Replies
@Arboreal ant Still new to Next.js.
The web application will instead have a REST API for the actual backend stuff,
According to the moderator, if I will fetch via REST API, it is better to use stuff like TanStack query instead of server actions.
This weekend I went over the docs of TanStackQuery.
Which is the preferred way or the recommended way for Next.js + TanStack Query in this case?
Prefetching (https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-app-prefetching) or streaming (https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-suspense-streaming) ?
yea, server actions are made for data mutations on the server (not for fetching data). Either directly fetch in your server component and pass the data down to your components or use a clientside fetching library like SWR or React Query like you mentioned
@B33fb0n3 yea, server actions are made for data mutations on the server (not for fetching data). Either directly fetch in your server component and pass the data down to your components or use a clientside fetching library like SWR or React Query like you mentioned
Arboreal antOP
If I will use React Query, is there a community preferred way of data fetching or it will just depends on my own?
Additional question, if I will use React Query, is it okay to use axios or should I use
Based from what I heard, next.js enhanced the default
fetch?Based from what I heard, next.js enhanced the default
fetch and it is better to use it when using next.js@Arboreal ant If I will use React Query, is there a community preferred way of data fetching or it will just depends on my own?
yea, fetch in server components and pass to your component (no RQ needed). Else just
useQuery from RQ inside client componentsAnswer
@Arboreal ant Additional question, if I will use React Query, is it okay to use axios or should I use `fetch`?
Based from what I heard, next.js enhanced the default `fetch` and it is better to use it when using next.js
axios is dead. Read about it here: https://www.adios-axios.com/
Either use only
Either use only
fetch for the advantages you mentioned or if you need more use kyArboreal antOP
I see, I didn't know.
Thank you very much!
Thank you very much!
sure thing