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.