Dynamic page should be only created once (and kept in the DOM)

Dear all,

in my app all pages are created dynamically via JS (not separated pages). Works pretty fine.

BUT, due to performance reasons I would like to create a couple of pages only when they are called the first time. If user navigates later back to the page, the previous DOM element should be used.

Approach (sandbox): https://codesandbox.io/s/new-sea-3e7sx?file=/app.js

The page to be create dynamically appears if the user clicks on “Info”. The page contains the creation timestamp to verify if it is created a 2nd time when the user re-visits the page (back -> info -> back -> info -> back -> info).

Adding “removeElements=false” does not help as well…

Is this somehow possible?

Best regards & many thanks in advance!

Check route’s keepAlive https://framework7.io/docs/routes.html#keep-alive