How Do I Fix Inconsistent Route Caching?

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.