next.js
96d7526c - Add a cold cache dev indicator (#94611)

Commit
145 days ago
Add a cold cache dev indicator (#94611) 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.
Author
Parents
Loading