NextJS 14 (App-Router) Navigating through pages refreshes the whole page at random ? (PRODUCTION ONLY) BUG?

Help
1

I have recently migrated to Nextjs 14 app router. My current folder structure looks like this:

Capture

When navigating between pages inside the dashboard layout it sometimes completely refreshes the page for no reason. This only happens in production. I could not reproduce this in development.

Here is a video: Watch 2024-09-07 22-02-44 | Streamable

My root layout /app/layout.tsx contains a react context which gets updated when for example users chat with one of the AI’s.

The back button executes this: routing.push(“/”);

Same when clicking on the chat button: routing.push(chatPath); // chatPath is the path /

2

Solution:

I discovered that stricter caching rules apply in production. It seems there is a default value, possibly around 15 seconds, which causes a page refresh when routing between pages if the cache has expired. Once refreshed, the page remains stable for the cache duration.

Increasing the stale time in the Next.js configuration resolved my issue. In fact, having the ability to revalidate the cache at specific intervals is quite beneficial.
// next.config.js
experimental: {
staleTimes: {
// Forces page refresh on route change every 24hours. Because cache gets invalidated
dynamic: 86400,
static: 86400,
},
},

1 Like
3

Thanks for coming back with your solution!

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.