Page caching: clearing cache on data changes

Direct answer

No. Framework7’s Router page cache is a navigation and DOM cache, not a reactive data cache. It does not watch your application data model or detect that a backup has been restored. A page initialized before the restore keeps its existing DOM node; returning to it later shows the old markup unless your code explicitly updates it or forces the router to rebuild the page.

Likely explanation versus confirmed behavior

Confirmed: the router keeps previously rendered pages in the view to speed transitions. Likely: because a page’s content is rendered when that page is initialized, a cached page initialized before the restore will not re-render automatically. Only code that mutates the DOM node, or router options that discard the cached node, will make restored data visible.

What to do after a restore

The correct fix depends on page type. Please confirm whether the affected pages are plain HTML/JS routes or Framework7 component pages (React, Vue, or Svelte). That single detail determines whether you patch the DOM in a lifecycle hook or rely on component reactivity.

Plain HTML/JS pages

1. Use a re-entry hook such as pageBeforeIn / page:beforein or pageReinit / page:reinit in the route definition to re-query the restored data and update the DOM.
2. Do not rely on pageInit / page:init; it runs on first initialization and may not run again for a cached page.
3. If the page is deeply stale, force a rebuild with router navigation options such as reloadCurrent, reloadAll, or ignoreCache, or call router.refreshPage() / router.clearPreviousPages() where available. Scope the reload to the affected route to avoid discarding unrelated cached pages and losing scroll or form state.

Component pages

1. Prefer store or component reactivity so the component re-renders when the restored data changes.
2. If the component does not remount naturally, force a remount through a key change or route reload rather than manually patching DOM in pageReinit, which can conflict with the component renderer.

Version sensitivity

Event names and router options have changed across Framework7 majors—for example, camelCase pageReinit versus kebab-case page:reinit, and the exact semantics of ignoreCache and reloadAll. Verify against your installed version rather than assuming one API shape.

Practical verification

• Build a minimal A → B → back flow. Render a value on page A, change the underlying value while B is active, then return to A and log pageInit, pageReinit, and page:beforein to see whether A’s DOM text changes without a manual reload.
• After restore, force the affected route with reloadCurrent / reloadAll / ignoreCache or router.refreshPage() / clearPreviousPages() as supported, then verify A shows restored data on router.back, browser back, and swipe-back if enabled.
• Inspect the DOM before and after restore: confirm the stale node is removed or re-created, and that duplicate page nodes do not accumulate in the view.
• Log pageBeforeRemove / page:beforeremove around forced reloads to confirm cache entries are actually cleared, not merely hidden.
• Repeat after an app relaunch or deep link to the cached route to ensure restored data is rendered from the restored source, not from an in-memory cached page.