States persist on back/forward navigation due to bfcache

[axzilla]

Description

When navigating with browser back/forward buttons, Alpine.js component states (like opened modals, accordions, datepickers etc.) persist because the page is loaded from the browser's back-forward cache (bfcache). This creates a poor user experience as components appear in their previous state before Alpine.js can reinitialize them.

Examples

• Sheet/drawer components briefly flash open
• Accordions stay expanded
• Datepickers remain open
• Any component using x-show or state management shows its previous state

Expected Behavior

When navigating back/forward:

• Components should start in their initial/closed state
• No UI elements should flash or briefly show their previous state
• The page should behave as if loaded fresh

Investigation

We've tried several approaches but haven't found a clean solution that prevents the state persistence. The main challenge seems to be that the browser restores the DOM state from bfcache before Alpine.js has a chance to initialize.

Question

What's the recommended way to handle component states when pages are loaded from bfcache?

Environment

• Alpine.js version: 3.x
• Browser: Chrome, Firefox, Safari (issue appears in all)

[axzilla]

axzilla/templui#27