Premise
Turbo 8 has arrived, and with it InstantClick behavior! The good news is that this will speed up navigation in a lot of cases tremendously. Beware though that it’s enabled by default on all navigations, which can cause stress for your app servers.
There are options to either opt-out globally, or on a per-element basis with data-turbo-prefetch="false"
. However, this requires you to declare it on each link element individually, or opt out on a parent (e.g. <div>
) element and then reenable for every link that requires it inside it.
What, though, if we want an implicit opt-out? This could be useful
- for sub-routes, e.g. an
/admin
namespace, etc. - for link elements that trigger interactions, e.g. via TurboBoost Commands
Starting Point
We are going to simulate these cases in a small demo app. It has two sub-pages, /authors/author.html
, and /posts/post.html
. It also features a “Like” link with a data-turbo-command
attribute indicating that it is used by TurboBoost:
https://stackblitz.com/edit/turbo-drive-opt-in-instantclick?file=index.html%3AL38
As you can see in this GIF, prefetches are triggered on each of those links:
Challenge
Come up with a solution that
- triggers a prefetch for the post, but not the author link
- doesn’t prefetch the “Like” link
- You will likely want to use the
turbo:before-prefetch
event for this:
https://stackblitz.com/edit/turbo-drive-opt-in-instantclick?file=index.html,app.js%3AL6
Teaser
How could you make this pattern extensible?