Prefetching

[fleck]

First, thanks for turbo! I'm working on a prefetcher for turbo https://github.com/fleck/nitrous-oxide. I'm taking advantage of the browsers built in http caching and max-age header. The issue I encountered was when a user hovers over a link and clicks before that fetch is finished resulting in a double fetch. I've fixed this by tracking inflight requests.

When a user clicks a link and there's in inflight request I start the visit (I check whether this is targeting a frame or a general visit):
https://github.com/fleck/nitrous-oxide/blob/master/src/index.ts#L73

After the promise is fulfilled I then trigger a frame or regular visit:
https://github.com/fleck/nitrous-oxide/blob/master/src/index.ts#L82

This seems to work well enough, but the code feels a little janky, just wondering if you had suggestions for a better way to handoff a url and Promise<Response> to programmatically trigger a turbo visit/TurboFrame visit?

Thanks again for the work on Turbo, It's been really nice to work with!

[zejji]

+1 Would love to see this implemented as an official Turbo plugin. It would be really helpful to combine Turbo with the functionality (and configurability) of something like FlyingPages or instant.page. Even allowing the option to prefetch on mouse-click down could shave off 40+ ms of latency with minimal wasted server calls.

[silentjay]

If like me you don't want to add npm/another toolchain to their projects someones shared prefetch.js gist https://gist.github.com/vitobotta/8ac3c6f65633b5edb2949aeff0dec69b

[fleck]

Cross posting a comment for feedback on non bundler setup:

fleck/nitrous-oxide#2 (comment)

This can be used without build tooling via https://www.skypack.dev/view/nitrous-oxide. But if you're looking for a more traditional UMD build that you can vendor into your source control and include via a regular <script tag (e.g. NOT type="module") then you can checkout turbo and our UMD builds: https://unpkg.com/[email protected]/dist/nitrous-oxide.umd.production.min.js and https://unpkg.com/@hotwired/[email protected]/dist/turbo.es2017-umd.js I think the script tag for turbo would need to be before the script tag for nitrous oxide. Let me know if this works for you or if you run into any issues. Would like to add docs on how to use without build tooling, just haven't had time to test that approach myself.

[dhh]

I'd very much like to see this built into Turbo. If anyone wants to work on this, please do start a PR.