All Articles

How Do I Fix Inconsistent Route Caching?

Jack Herrington
Jack Herrington
August 29th, 2023

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

Subscribe for Free Tips, Tutorials, and Special Discounts

We're in this together!

We respect your privacy. Unsubscribe at any time.

Jack Herrington

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.