Next.js Discord

Discord Forum

Duplicate fetches between router transitions

Unanswered
Chartreux posted this in #help-forum
Open in Discord
ChartreuxOP
Hi I'm using react-query with Next 13 and app router... and when I prefetch some global settings from REST API in root layout a when I do same fetch in child component because I need those data, request are deduped well.

But not between router transitions. When I click from main page to some different route, fetch for global settings is fired but I already have those settings in react-router cache so why to do another fetch?

Could someone explain that adn how to prevent it?

Thank you.

61 Replies

but are you ensuring whatever function your calling
is wrapped in a react cache
ChartreuxOP
I have wrapped my funcions in cache but I'm not sure... are they data cached between router transitions?
ChartreuxOP
when I click on <Link> ... lets say I have article list and i click on article which leads me to article detail
Headless
Deduping only works on the same segment
its if you call the same request multiple times on the same fetch for the page
if you navigate to another page it does not still use the cache from the previous page
this is what a lot of people get confused about because react named it cache
its not really a cache, its just for deduping on a single request
not between different requests.
There is a unstable_cache function that is being worked on right now that basically does what fetch does and has the ability to revalidate and store the data.
That is more what you want I believe.
ChartreuxOP
hm I would like to have SPA application like before we have. When page loads first time, it loades everything and store to Redux. And between SPA navigation some "global settings data" was stored in Redux and no further requests were initiated. Is that possible to do in app router?
I think I need other type of router which work only in client side...
Headless
im not sure what you mean
any client components act the same way as the page router
deduping is primarily for the server
ChartreuxOP
so when router change, request is going to server a everything starts from scratch... all the cached data are gone and all the fetches will run again? is that basically true?
Headless
so like
lets break this down lol
if you're in a server component
and you call fetch with a url
in multiple child server components
that fetch will dedupe so only one fetch happens
ChartreuxOP
clear
Headless
fetch also has ACTUAL caching behavior though
so depending on your cache props (default it caches) it stores it so even on the next request it will just use the cache instead of refetching the data again
This is fetch ^
if you are not using fetch and just have a function
and you wrap it in cache from react
ChartreuxOP
ok it is clear to me
Headless
this does deduping but does NOT do the same cache effects fetch has
there is a unstable_cache that works basically the same as fetch, but its unstable and has bugs
this is all server stuff
ChartreuxOP
OK I understand... but when I fetch lets say menu items from API and with other content I will render whole page on URL "A"... what is happened when i click on menu item and url changes to "B".... do I need another request for menu items? Because in my case when im browsing web.. server makes the same request again and again
Headless
Are your cache settings set to constantly fetch new data?
can you show code
ChartreuxOP
I'm not sure because I'm using react-query function pre prefetch and fetch... adn under the hood we are using old isomorphoc-fetch package... I'm about to swich to fetch .... so let say I'm working only with cache function and using REact cache
Headless
i need code to understand
if its not using the fetch function its most likely not having the cache capabilities
also is this a dynamic route
or a static route
ChartreuxOP
it is a dynamic route
Headless
ah
you need to explicitly tell
that the page needs to use cache
ChartreuxOP
i didnt realize it is important
Headless
if its a dynamic segment
it assumes you don't want cache
just 
export const revalidate = 'force-cache'
that should make fetches cache
ChartreuxOP
Hm i found that in documantation and used in page.tsx but I still seee duplicated request
first GET is homepage and second is click on article detail
Headless
did you do what i said in both pages
ChartreuxOP
yes I put it ho page.tsx for HomePage and page.tsx for the articles with dynamic urls
I will try to start new project without react-query
Siberian Flycatcher
but when I fetch lets say menu items from API and with other content I will render whole page on URL "A"... what is happened when i click on menu item and url changes to "B".... do I need another request for menu items?

If you put your menu in a global layout (app/layout.js) it won't get re-rendered (and therefore won't re-fetch data) when users navigate between pages.

Check out https://nextjs.org/docs/app/building-your-application/routing#partial-rendering