mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Hendrik Liebau
96d7526ce3
When Cache Components is enabled, a `next dev` load that streams while
filling an empty cache is not representative of production: cached
content streams in as it is computed rather than being served instantly,
and React's DevTools cannot accurately show what would normally suspend.
This surfaces that state in the dev indicator. While a client navigation
is pending the rendering pill is colored and labeled by the cache state
(teal "Rendering" normally, orange "Rendering (cold cache)" when the
render hit an empty cache, and orange "Rendering (cache disabled)" when
caches were bypassed), and once the load settles a cold or bypassed load
leaves a persistent, dismissible orange badge ("Cold cache" or "Cache
disabled") with an info panel that explains why the load was not
production-like and suggests reloading once the caches are warm.
https://github.com/user-attachments/assets/9be2c35a-3a36-47d7-8803-6e284c332a4b
The indicator's displayed state is now owned by a single state machine,
`useIndicatorDisplay`, rather than being composed from a debounce
(`useDebouncedValue`) and a delayed render (`useDelayedRender`) whose
delays compounded and were hard to reason about. It models the indicator
as an explicit set of phases (idle, entering, pill, exiting, badge)
driven by the raw compiling, rendering, and cache-status signals, and it
hands the rendering pill off to the persistent badge in a single commit
so the indicator never collapses to the bare logo between them. It also
unifies the pre-existing "Cache disabled" badge with the new cold-cache
state so both flow through one path (a navigation shows "Rendering
(cache disabled)" and then settles into the badge). The Cold cache badge
tracks the most recent load, so a later navigation that settles warm
clears it.
The rework also collapses the timing into a single 200ms window for both
showing and hiding, matching the transition used elsewhere in the dev
overlay, and relabeling between active states (for example "Compiling"
to "Rendering", or the flip to the cold-cache color) is now immediate.
This is intentional: the previous debounce held a label on screen past
the moment its underlying state ended, so "Compiling" could linger after
the compile had finished and make the bundler look slower than it
actually was. The one genuine flicker the old debounce guarded against,
the pill blinking out to the bare logo when the status briefly drops
between rapid compile bursts, is still prevented by the new exit linger.
Two cases are knowingly not handled yet: a short-lived `'use cache'`
entry and a `'use cache: private'` entry both report a miss on every
load, so they show the badge even on a warm reload. These are
limitations of the current dev cache behavior rather than of the
indicator, and the tests cover them with `TODO`s that point at the
follow-up changes that will fix them.