How to Fetch api in server side rendering using Tanstact Query(React Query) Next 14 (App Router)?
Answered
Md.Mohon posted this in #help-forum
Md.MohonOP
Hello, I need a fetch a api in server side rendering page using tanstact query (react query). So which is the best way to fetch endpoint the server side rending page?
Answered by B33fb0n3
as zomh mentioned it is possible to fetch stuff via react query serverside, but it's not recommended.
I couldn't find you case inside the docs so I tell you how I currently do it. I create a
So, I recommend you: create a
I couldn't find you case inside the docs so I tell you how I currently do it. I create a
fetcher.ts and inside it I have the functions, that fetches my data (as plain functions). When I need to fetch this data somewhere (for example inside an endpoint or server actions or ...) I can directly call this function without worring about additional server requests.So, I recommend you: create a
fetcher.ts. Add your fetcher functions (I don't mean functions that only use fetch()). Call your methods where you need them.11 Replies
wow, there are a few things that does not match...
1. Don't fetch your own endpoints in server components (if it's your own endpoint)
2. react query (rq) if for client stuff.
3. rq does not render the page, it only fetches data.
So fetch your external endpoint via the
1. Don't fetch your own endpoints in server components (if it's your own endpoint)
2. react query (rq) if for client stuff.
3. rq does not render the page, it only fetches data.
So fetch your external endpoint via the
fetch method serverside (without everything else like rq) and pass down the data to client components if needed. Your data will be cached if needed@Md.Mohon solved?
Netherland Dwarf
@B33fb0n3 hmm so what your saying is its wrong to fetch an api (next api route.ts) route inside a server component or fetching an endpoint inside another endpoint?
@Netherland Dwarf <@301376057326567425> hmm so what your saying is its wrong to fetch an api (next api route.ts) route inside a server component or fetching an endpoint inside another endpoint?
Both is wrong. Fetching an api route (own route) inside your serverside code will create an extra network request to this endpoint. That's different for server actions
Netherland Dwarf
@B33fb0n3 oh , so what is the proper way- i read next.js doc and they said to fetch inside the server components in next.js best patterns for fetching in server components
American Crow
It is possible to integrate React Query on the client and server (support server rendering) in a RSC / App router environment:
https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
However by not using the monkey patched nextjs
I'd not recommend using react query for server side rendering. In the guide itself they quote
Most people will use nextjs's monkey patched
https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
However by not using the monkey patched nextjs
fetch you opt out of caching, re-validating, decoupling and you (or the third party library has to handle it).I'd not recommend using react query for server side rendering. In the guide itself they quote
Server Components and streaming are still fairly new concepts and we are still figuring out how React Query fits in and what improvements we can make to the API.Most people will use nextjs's monkey patched
fetch on the server side and in client components they might consider something like react query for certain tasks like polling or infinite scrolling.@Netherland Dwarf <@301376057326567425> oh , so what is the proper way- i read next.js doc and they said to fetch inside the server components in next.js best patterns for fetching in server components
as zomh mentioned it is possible to fetch stuff via react query serverside, but it's not recommended.
I couldn't find you case inside the docs so I tell you how I currently do it. I create a
So, I recommend you: create a
I couldn't find you case inside the docs so I tell you how I currently do it. I create a
fetcher.ts and inside it I have the functions, that fetches my data (as plain functions). When I need to fetch this data somewhere (for example inside an endpoint or server actions or ...) I can directly call this function without worring about additional server requests.So, I recommend you: create a
fetcher.ts. Add your fetcher functions (I don't mean functions that only use fetch()). Call your methods where you need them.Answer
@Md.Mohon solved?
Md.MohonOP
Yes solved
@Md.Mohon Yes solved
great. Please mark solution