why is the dev-indicator showing the same route as "dynamic" on inital load, but "static" on client-side nav

[stefanprobst]

Summary

it is very confusing that the dev-indicator (the floating button in the bottom left corner) shows the same route as "dynamic" when initially loaded (hard refresh), but as "static" when i navigate to it via Link.

is that intended behavior? and if yes, what does it mean?

(also, to make it actually helpful, it would be great if the indicator could show why specifically a route opted into dynamic rendering, for example where are headers/cookies/... called)

Additional information

No response

Example

No response

[baljir0901]

Great question! I was also confused by this behavior at first — here's what I found:

🔍 Why does the dev indicator say "dynamic" on hard reload but "static" on client-side nav?

This is expected in some cases and depends on how you load the route:

Load type	Result seen
Hard Refresh (SSR)	Shows "dynamic"
Client-side Nav	Shows "static"

Why? On a full reload, the route is processed server-side, so if your code uses anything like:

• cookies()
• headers()
• export const dynamic = "force-dynamic" (App Router)
• getServerSideProps() (Pages Router)

…it’ll be flagged as dynamic, even if the content is cacheable.

But when you navigate via <Link>, the static version might already be preloaded or cached, so the dev indicator shows "static".

---

💡 Suggestion

Totally agree — it would be super helpful if the dev indicator showed why a route is considered dynamic (e.g., “cookies() called in layout.tsx”).

For now, if you're using the App Router, you can inspect:

• export const dynamic = ... flags
• Usage of cookies() / headers() in server components

If using Pages Router, check:

• If getServerSideProps() is present

Hope this helps clarify the behavior!