Caching of turbo-frame not possible?

1

I’m trying to figure out how to create a sort of “slide show” functionality. It consists of the current item (a “quote” in this context); as well as a Prev/Next button to move between items. On top of that, I’m using the data-turbo-preload on the Prev/Next buttons to try and pre-populate the cache such that when the user wants to navigate to the Prev/Next item, it loads instantly.

Only, it doesn’t appear to be loading from cache at all. If I add a sleep(1000) to the top of my server-side rendering, I can see a 1-second pause before the content is rendered to the page (even if I’ve just rendered that page: think navigating “next” and then “prev”).

That said, I can see from the network activity that when the page loads, the data-turbo-preload is triggering two fetch requests in the background. So, the page is being cached; but, the <turbo-frame> navigation doesn’t seem to be consuming the cache.

I tried removing the data-turbo-action="advance" attribute to see if maybe that was messing it up; but, no luck - there’s still a 1-second pause when rendering the Prev/Next links.

Here’s the markup that I’m using:

<turbo-frame id="quote-frame" data-turbo-action="advance">

	<figure>
		#encodeForHtml( quote.excerpt )#
	</figure>

	<div>
		<a
			href="index.htm?quoteIndex=#encodeForUrl( quote.prevIndex )#"
			data-turbo-preload>
			Prev quote
		</a>
		<a
			href="index.htm?quoteIndex=#encodeForUrl( quote.nextIndex )#"
			data-turbo-preload>
			Next quote
		</a>
	</div>

</turbo-frame>

This is a stand-alone demo, so I’m pretty sure I don’t have anything in here accidentally messing it up. I’ve double-checked that I have no <meta name="turbo-cache-control" content="no-preview" /> tag or anything like that. I’m quite a bit lost on this matter.

I’ve tried Googling for all sorts of phrases, and looking through this forum. The only thing I could find that seemed related as this other post: How to cache previous for turbo frames? - #3 by BenNadel – but, it looks like no one ever responded to that one.

Much thanks!

2

Caching of turbo-frame works, however it appears preload + turbo-frame does not work. If you want to use preload, I suggest removing the turbo-frames.

You may also want to report the preload + turbo-frame not working to GitHub - hotwired/turbo: The speed of a single-page web application without having to write any JavaScript.

1 Like
3

Interesting! Thanks for clarifying the finer details. I’ll file an issue because it seems like it should work since a cache is a cache is a cache (I don’t see why the source of the data should make a difference).

4

I’ve opened an issue on GitHub.