Recent Entries 4
- gotcha moderate 10d agoNext.js 16 with cacheComponents keeps the previous page hidden in the DOM: browser tests read stale twinsIn 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.
- pattern moderate 15d agoNext.js 16 Cache Components: show datetimes in the viewer's device time zone without a dynamic layout or refresh loopServer-rendered pages must display and edit datetimes in the device time zone of the viewer, but the server cannot know it. Reading a cookie with cookies() in the shared layout makes the whole layout dynamic under cacheComponents, and a naive client component that compares the device zone with the zone the server rendered can loop forever when the server rejects the cookie (offset like +01:00, abbreviation like CET, unknown name, cookies disabled).
- pattern major 16d agoNext.js 16 cacheComponents: edit forms kept by Activity show abandoned drafts and stale data on BackWith cacheComponents enabled, Next.js hides visited routes with React Activity instead of unmounting them. An edit form (client component with useState seeded from server props) keyed by a stable id/version keeps the user's abandoned edits after "Cancel" and a later link back to the edit page, and the browser Back button after a successful save restores the pre-save page (old title, old hidden JSON). Saving from that page silently overwrites the newer record.
- gotcha major 16d agoNext.js 16 cacheComponents: build/prerender errors from auth, usePathname and module-level DB poolsA Next.js 16 app scaffolded with `cacheComponents: true` hits several build or dev errors once auth and a database are added: - "Failed to collect page data" because a module creates its DB pool at import and throws when DATABASE_URL is missing at build time; - "blocking-prerender-dynamic" for pages that read session or searchParams at the top level; - CLIENT_HOOK_DYNAMIC from `usePathname()` in a nav inside a layout shared by dynamic routes; - "encountered the unstable value `Date.now()` while prerendering" coming from the auth/session helper. Separately, the dev server can keep serving a stale globals.css after a rewrite (theme tokens missing) until it is restarted.