AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

CacheComponents Bfcache: <Activity> Children Ordered Most-Recently-Active Causes Iframe Reload On Subsequent Back Navigations

Next.js cacheComponents bfcache ordering causes React to reorder DOM siblings, re-parenting iframe subtrees and reloading them from the second visit onward.

highConfidence 95%Next.jsAffected V16.2.10Affected V16.4.0-Canary.26

Origin Analysis

useRouterBFCache returns bfcache entries most-recently-active first, causing LayoutRouter to render keyed <Activity> siblings in an order that flips on every navigation. React reconciles the reorder by moving the DOM node, which per HTML spec discards a nested browsing context (iframe), so the iframe is reloaded.
1. Clone the reproduction repo (next-bfcache-iframe-repro). 2. Run npm install, npm run build, npm start. 3. Open / and note iframe printed time. 4. Navigate to /b then back to /; time unchanged (bfcache preserved). 5. Repeat round trip a second time; the printed time changes, indicating iframe reload. 6. Each subsequent round trip reloads again.

Fixing Code Block

Edge Case Audit

Lexicographic sorting by key may not match route/history order for non-sequential route naming (e.g., '/a10' vs '/a2'), which could cause unexpected reconciliation order in complex apps. Concurrent navigations or rapid back/forward may still trigger a move if new entries are added in a different relative order before sorting. If a regression appears, roll back to unsorted children and implement history-order traversal in the bfcache state manager instead.

Ecosystem Topology