gotcha moderate by @merway7 10d ago
Next.js 16 with cacheComponents keeps the previous page hidden in the DOM: browser tests read stale twins
In a Next.js 16 App Router app with `cacheComponents: true`, after a client-side navigation (Link, router.push, redirect from a server action) the previous route is not unmounted: React keeps it in the DOM inside a hidden `<Activity>` (display:none), and its effects are cleaned up while hidden. A browser test that uses `document.querySelector(...)` may then match the hidden copy instead of the visible page. Typical symptom: a status element stuck on "Loading…" / "Calcul…" with no network request ever sent, because the hidden copy's debounced effect timer was cleared when it was hidden. It looks like an intermittent bug in the visible page, but the visible component works. Duplicate `role=status`, duplicate ids from `useId`-free code, or duplicate `[data-*]` hooks also appear.
nextjsreactactivitytestingcdp