Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make data-sveltekit-prefetch work with mousedown

See original GitHub issue

Describe the problem

At this time, data-sveltekit-prefetch works with mouseover on PC, while this behavior lets the browser prefetch a link sooner, it can lead to two issues :

prefetching more links than necessary when an user just hovers over big links without clicking on them, which can lead to additional useless requests, which are counted when using edge hostings like Cloudflare Workers or Deno, and which can lead to more data consumption
prefetching too soon, on a near-realtime application, fetching 500ms too soon can lead to outdated data (for example, if it’s realtime stats app or a chat)

Describe the proposed solution

prefetching on mousedown still lets 100ms (duration of a click) to prefetch a page before the user’s click ends, and if a website is hosted on a nearby server, or on the edge, the user will keep a feeling of immediacy, it will also do requests only when the user really wants to navigate to the page

To implement mousedown prefectch, we could have something like that for per-link or per-parent-element configuration:

<a href="/mypage" data-sveltekit-prefetch="mousedown"></a>

Or have a parameter like this in svelte.config.js :

prefetching: 'mousedown'

Alternatives considered

The alternative would be to prefetch programmatically with a custom directive, but it would require to reimplement a huge part of the prefetching syntax that sveltekit already provides, so I believe just having a way to opt-in mousedown prefetching would be a much better and cleaner way of using it

Importance

i cannot use SvelteKit without it

Additional Information

Prefetching on mobile already works on touchdown and does not need to offer another prefetch behavior

Issue Analytics

State:
Created a year ago
Reactions:4
Comments:10 (4 by maintainers)

Top GitHub Comments

5reactions

gterrascommented, Oct 24, 2022

make less useless requests on edge workers

This is a fair point, prefetch as it is now lacks a bit of subtlety in regards of limited resource, especially since sveltekit actively promotes serverless.

3reactions

ivanhofercommented, Nov 22, 2022

What about an option to disable prefetch further down the component tree? So you can set data-sveltekit-prefetch globally and then disable it for a specific part of your application:

<body data-sveltekit-prefetch>
	<main> <!-- main content --> </main>
	<nav>
		<a href="/">Home</a>
		<a data-sveltekit-prefetch={false} href="/settings">User Settings</a>
	</nav>
</body>

I have a similar use case where preloading the route on hover could lead to some issues, But I don’t want to disable prefetch for the rest of the application. Beeing able to opt-out at certain parts of the application would be a great addition.

Or also a +layout.js or +page.js option to prevent prefetching for certain routes would be an option, but I would imagine this beeing more complex to implement.

routes/settings/+layout.js

export const prerender = false

edit: I just saw that the prerender option exists already, but I guess this only applies when building the application and not when calling prerender during runtime.