Flipping content on Turbo Drive navigation

[AmShaegar13]

When clicking a link using Turbo Drive, which you do by default when creating a new Rails app, the content is flipping between the current version, the old version and the new version when the content was changed for example by another user.

Imagine a counter that is incremented on every request.

1. Counter shows 1
2. Click link to the same page
3. Counter shows 2
4. Click link again
5. Counter immediately changes back to 1
6. After the response arrives the counter changes to 3

This can be observed especially with slow connections. I created a fresh rails application with the following code to demonstrate the issue:

Controller

def index
  session['counter'] ||= 0
end

View

<span><%= session['counter'] += 1 %></span>
<br>
<%= link_to 'Click me!', root_path %>

I used Firefox' Development Tools to simulate a slow connection. This is what happens:

Basically, what I try to achieve is a shared shopping cart with an indicator for how many items are in it which is present on every page. But when navigating the site and someone changes the shopping cart I get this nasty behavior.

It looks like this is an issue with caching. Because when I disable it using

<meta name="turbo-cache-control" content="no-cache">

the issue is gone. However, I think that this behavior is not intended. Why would I want and old version from the cache while waiting for the new version when I already have the current version displayed?

[tleish]

See: Persisting Elements Across Page Loads

- <span><%= session['counter'] += 1 %></span>
+ <span id="cart-counter" data-turbo-permanent><%= session['counter'] += 1 %></span>
<br>
<%= link_to 'Click me!', root_path %>

[AmShaegar13]

Thanks for your reply. I tried that but it doesn't work and doesn't make sense to me. I don't want to persist the cart. It must be updated on navigation. In the counter example the counter would stay at 1 until you refresh the whole page. This is not the goal.

I know that I could change the the cart with action cable but I don't need it to be super up-to-date. Refresh on page visits enough. I thought I'd save the overhead.

[tleish]

The behavior you are seeing is from Turbo Restoration Visits.

It must be updated on navigation.

This is how data-turbo-permanent, but...

• it won't work unless you also add a unique id to the same element
• if you are navigating to the same page over and over (which is not typical behavior), then it will appear as if this feature is not working.

GET REQUESTS

Example: without data-turbo-permanent

• Page 1 (uncached): 0 => (click GET to Page 2)
• Page 2 (uncached): 1 => (click GET back/forward to Page 1)
• Page 1 (cached): 0 renders (from cache) then 1 renders (when fetch updates page)

Example: with data-turbo-permanent

• Page 1 (uncached): 0 => (click GET to Page 2)
• Page 2 (uncached): 1 => (click GET back/forward to Page 1)
• Page 1 (cached): 1 renders (from cache) then 1 renders (when fetch updates page)

Example: with data-turbo-permanent navigating to same page

• Page 1 (uncached): 0 => (click GET to Page 1)
• Page 1 (cached): 0 renders (from cache) then 1 renders (when fetch updates page) => (click GET to Page 1)
• Page 1 (cached): 1 renders (from cache) then 2 renders (when fetch updates page)

NON-GET REQUESTS (e.g. POST/PUT/DELETE)

When changing state on the backend server (e.g. add something to the shopping cart), you should use a NON-GET request. This is general best practice (even without turbo). NON-GET requests clear turbo cache.

Example: without data-turbo-permanent

• Page 1 (uncached): 0 => (click POST to Page 2, skips caching Page 1)
• Page 2 (uncached): 1 => (click GET back/forward to Page 1)
• Page 1 (uncached): 1 renders

[AmShaegar13]

First of all, thanks for taking the time to explain this! I am still trying to wrap my head around.

Navigating to the same page with a counter is a made up example that might be chosen badly, I agree. This is not what users would usually do.

I can see where the problem is coming from now. However, data-turbo-permanent is not a solution then. Maybe, data-turbo-cache="false" is. Better show nothing than something wrong. I'll give it a try. Thanks!

[AmShaegar13]

I removed that element from the cache now and display a spinner when following links. Maybe, this code will help someone in the future. I am using Bootstrap for the spinner.

<span class="no-cache" data-turbo-cache="false"><%= cart.sum %></span>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>

.no-cache {
    display: initial;
}

.no-cache + .spinner-border {
    display: none;
}

.no-cache:empty {
    display: none;
}

.no-cache:empty + .spinner-border {
    display: initial;
}

[compumike]

@AmShaegar13 We ran into a similar issue! I found the stale caching bug in Turbo (which happens when you click a link to the same page you're currently on) and fixed it in PR #895.

[AmShaegar13]

Hey @compumike, that's awesome. I would like to test it but I honestly don't know how to replace turbo with your fixed version in my application. I am not used to all this new importmap/Javascript stuff at all.