Why does Turbo Drive "Back" reload Turbo Frames?

[Karl]

Hello,

I evaluate using both Turbo Drive and Turbo Frames.
We have a page with Turbo Frames. When I click on a link to another page, and then the browser back button, Turbo Drive correctly caches the DOM, but still the Turbo Frames are reloaded which messes up the scroll position in most browsers.

How can I prevent Turbo Drive from reloading Turbo Frames when hitting the back button?

[reneweteling]

Have the same issue, the whole app has drive enabled, and this makes navigation super smooth, only all the turbo frames get triggered when you go back, IMHO this should not be the case, or at least should be configurable by some attribute on the frame.

A small GIF to demonstrate the issue.

[reneweteling]

ok after reading, what ive just should have done in the firstplace this is the solution: Turbo Handbook

[tleish]

We created a stimulus controller to remove the src attribute of the turbo-frame right after it loads on certain occasions. Doing this prevents the turbo-frame from reloading if that’s the desired behavior.

export default class extends ApplicationController {
  clearSrc() {
    this.element.src = '';
  }
}

<turbo-frame id="comments" 
             data-controller="turbo-frame" 
             data-action="turbo:frame-load->turbo-frame#clearSrc">
  ...
</turbo-frame>

[reneweteling]

i’d suggest reading the handbook and using data-turbo-permanent instead, it does just this.

Turbo Handbook