NextJS App Folder page data fetch is being cached no matter what I do
Unanswered
Yellow-headed Blackbird posted this in #help-forum
Yellow-headed BlackbirdOP
Hello everyone,
I have page.tsx file with fetchData() function that calls external API.
At some point the data gets updated, but when I navigate through navigation and come back to this view, the data doesn't revalidate.
The function is not called. NextJS is using some cache to show the old data to component.
How can I fix this?
I ve been adding no-store and revalidate: 0 to the method, but it doesnt even call the API.
So its remembering the data and not revalidating.
Only hard refresh shows the new data.
How to avoid this?
NextJS version: 13.2.4.
I have page.tsx file with fetchData() function that calls external API.
At some point the data gets updated, but when I navigate through navigation and come back to this view, the data doesn't revalidate.
The function is not called. NextJS is using some cache to show the old data to component.
How can I fix this?
I ve been adding no-store and revalidate: 0 to the method, but it doesnt even call the API.
So its remembering the data and not revalidating.
Only hard refresh shows the new data.
How to avoid this?
NextJS version: 13.2.4.
20 Replies
@Yellow-headed Blackbird Hello everyone,
I have page.tsx file with fetchData() function that calls external API.
At some point the data gets updated, but when I navigate through navigation and come back to this view, the data doesn't revalidate.
The function is not called. NextJS is using some cache to show the old data to component.
How can I fix this?
I ve been adding no-store and revalidate: 0 to the method, but it doesnt even call the API.
So its remembering the data and not revalidating.
Only hard refresh shows the new data.
How to avoid this?
NextJS version: 13.2.4.
This is due to the router cache, you need to use router.refresh() or window.location.href = …
(If you used server actions for the mutation then revalidatePath and revalidateTag will work too)
(If you used server actions for the mutation then revalidatePath and revalidateTag will work too)
Yellow-headed BlackbirdOP
Ouh it seems to solve it, thanks.
Is there any way to hide the visible update in data?
It loads the page and then updates the old data after small delay (using router.refresh()).
Is there any way to hide the visible update in data?
It loads the page and then updates the old data after small delay (using router.refresh()).
@joulev This is due to the router cache, you need to use router.refresh() or window.location.href = …
(If you used server actions for the mutation then revalidatePath and revalidateTag will work too)
Yellow-headed BlackbirdOP
Is there a way to turn off router cache?
@Yellow-headed Blackbird Is there a way to turn off router cache?
European sprat
no
huge thread on it here and the suggested answer is what they are proposing: https://github.com/vercel/next.js/discussions/54075
Yellow-headed BlackbirdOP
@joulev @European sprat does this work with docker and standalone export?
It worked on dev, prod builds, but doesnt work in azure with docker build... 😦
It worked on dev, prod builds, but doesnt work in azure with docker build... 😦
Using router.refresh();
European sprat
works fine
Yellow-headed BlackbirdOP
Oh weird, not sure how to debug this then. Will test this a bit more.
@European sprat works fine
Yellow-headed BlackbirdOP
https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
Using this docker, doesnt work also locally when running from docker.
Any idea what might be different in my setup to cause such issue?
Thanks, any help really appreciated!
Using this docker, doesnt work also locally when running from docker.
Any idea what might be different in my setup to cause such issue?
Thanks, any help really appreciated!
European sprat
my docker image is based on that example and it works for me
are you seeing an error or what is the issue exactly?
Yellow-headed BlackbirdOP
No errors, i load page and router.refresh() doest update stale data.
Running same build with npm run start works fine.
Im trying to update nextjs version, running 13.2.4 there.
But it works without docker. hmm
But it works without docker. hmm
European sprat
i don't think router.refresh() exists on versions below 13.4...
Yellow-headed BlackbirdOP
ok trying to update to see
Yellow-headed BlackbirdOP
yeah upgrading docker seems to solve issue locally running docker
cannot test azure since im getting 500 with new version of next :/
cannot test azure since im getting 500 with new version of next :/
Anyway I see this resolves the main issue!
You've been really helpful thanks