11 · side path · the cache

Click About. Then click the browser's back arrow.

Watch the wire: no request. Turbo saved a copy of the messages page just before it left, and Back renders that copy instantly, scroll position included. That's a restoration visit.

The copy is made with cloneNode(true), which keeps the HTML but drops every event listener. Stimulus doesn't mind: it reconnects controllers to the restored HTML the moment it appears. Hand-attached listeners are gone for good.

→ About, then ‹
11 · previews

Now click About a second time.

This time there is a request, but the cached copy appears immediately as a preview while the fresh page loads, then gets replaced. The <html> element carries data-turbo-preview during that window, so CSS or JavaScript can tell.

The server here has been slowed to a second so you can see the two-step. The console line under the page names each phase.

→ click About again
11 · the flash that won't die

Post a message, go to About, come back.

The green "Posted!" banner is back. It was on the page when Turbo cached it, so it came back with the page. Users read that as "did it post twice?"

Mark anything transient with data-turbo-temporary. Turbo strips those elements before caching. Flip the switch, post again, About, Back.

→ post, About, ‹
11 · opting out

Per page, two knobs.

<meta name="turbo-cache-control" content="no-preview">
<!-- cache it for Back, but never show it as a preview -->

<meta name="turbo-cache-control" content="no-cache">
<!-- never cache; Back fetches fresh -->

In Rails: turbo_exempts_page_from_cache and turbo_exempts_page_from_preview in a view or a controller. From JavaScript, Turbo.cache.exemptPageFromCache().

And for anything that must be tidied before the snapshot, listen for turbo:before-cache: close menus, reset forms, tear down third-party widgets.

Try it: the switch below puts no-cache on every page. Back now makes a request.

back to where you were ↩