Subscribe for Free Tips, Tutorials, and Special Discounts
We're in this together!
We respect your privacy. Unsubscribe at any time.
Question: How do I fix inconsitent route caching?
Answer: Both React and the NextJS App Router have new caches to increase performance. There is the caching around fetch
but there is also a cache around each route. So if you ask for the same route (e.g. /products/coolShoes
) twice you will get a cached response the second time around.
To fix that you can export a cache imperative constant in the route like so:
export const dynamic = "force-dynamic";
And that will tell NextJS to re-render the route every time even if the route has already been rendered. You may need to restart the server and delete the .next
directory where the cache is held in order to fix this behavior.
Share this article with your friends
Written by Jack Herrington
Jack Herrington is a Full Stack Principal Engineer who orchestrated the rollout of React/NextJS at Walmart Labs and Nike. He is also the "Blue Collar Coder" on YouTube where he posts weekly videos on advanced use of React and NextJS as well as other frontend technologies trends. His YouTube channel hosts an entire free courses on React and TypeScript. He has written seven books including most recently No-BS TypeScript which is a companion book to the YouTube course.