Preserve DOM when going back/forward in SPA-style navigation

Feature Request
,
1

Hello,

I need to preserve DOM when going back/forward when using SPA-style navigation, either by internal links or browser1.goto

I'm doing stuff like:

browser1.goto('/hello',true)

I want that to save the current DOM, so if I click the Browser's button to go back the DOM is restored.

In other words, if you fill a form, submit, get the results in a table (dmx-repeat), and then go to another page, and then go back using the browser button, the table stays exactly as you left it.

Here's some inspiration from the HTMX project:

This creates a new history entry, allowing navigation with the browser’s back and forward buttons. htmx snapshots the current DOM and saves it into its history cache, and restores from this cache on navigation.

By default they save the DOM of <body>

Edit: As a test I tried replacing the innerHTML of an existing element and AppConnect doesn't interact with it anymore

3

Bump

4

I'll have a look at it, but with how App Connect works it will be difficult. We use the browser history so we can do partial DOM updates, the problem with the back button is that we don't have a global state for our components, each work independent of each other.

5

The browser component has popstate. You can also use query parameters to ensure that when the user goes back/forward, the related flows or server connects are rerun based on the parameters.

6

Unfortunately, these server connects in particular are subject to rate limits and heavy data processing, but thank you for your suggestion :slight_smile:

7

and client-side caching isn't an option, even for a short interval?

8

This is a form submission, so I think POST is excluded from client-side cache I guess :thinking:

I did come up with some workaround with a data store, but it feels very hacky, would much prefer a Wappler native solution

9

Are you storing the results from the form submission in the database? If not, why not?

Why can't you submit the form (which does processing and stores the data), then use a server connect to display the data, which you can trigger on success of the form. That way, you can also cache the results and/or just display what was saved in the database.

1 Like
10

You can store some state in the history when navigating which you restore when you navigate back. The problem is with App Connect that the content gets re-rendered and there is no global state, each component is standalone and that makes it difficult to store some specific state.

I can take a look to just storing form element values, can't however promise anything.

11

Instead of replacing the SPA view's DOM entirely, try:

  • Render all “pages” into the DOM once (hidden via d-none conditional regions).
  • Navigation just toggles which region is visible.
  • Because the DOM nodes never unmount, their state (scroll position, input values, repeat data) is preserved automatically.
2 Likes