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.

Add option to prefetch links by default

See original GitHub issue

Is your feature request related to a problem? Please describe.

There should be an option to prefetch links by default. In my opinion, page transitions should always be instantaneous if possible. And this is the default in other frameworks like Next.js and Gatsby.

Now you could just add sveltekit:prefetch to every single <a> tag, but there are some reasons why this isn’t practical/possible.

It’s annoying
You can easily forget some
If you’re parsing markdown, you may not be able to add the prefetch attribute
When dealing with user-generated content (purely on the browser), again, it may not be possible to add the attribute
If you’re using 3rd-party components, you cannot add the attribute

And not only are faster transitions better user experience, in some industries (like eCommerce), the extra 150-500 milliseconds can mean millions of dollars of more revenue.

Describe the solution you’d like

Add field to svelte.config.cjs to automatically prefetch pages. Perhaps something like this?

module.exports = {
  kit: {
    prefetchLinks: true,
  },
};

Now there are likely valid reasons to not prefetch certain links, in which case you also need a way to opt-out of prefetching. This example seems like intuitive syntax:

<a sveltekit:prefetch={false} href="blog/what-is-sveltekit">What is SvelteKit?</a>

Describe alternatives you’ve considered

As far as I know, the current best solution is to add sveltekit:prefetch to every single <a> tag.

Alternatively, you could call prefetchRoutes(routes) on every page, but this is wasteful (all routes will be prefetched) and may not work with dynamic content.

How important is this feature to you?

I’ll keep using Svelte/kit if this doesn’t get added, but I’d be ecstatic if it gets added!

Issue Analytics

State:
Created 2 years ago
Reactions:39
Comments:15 (6 by maintainers)

Top GitHub Comments

9reactions

vwkdcommented, Aug 5, 2021

I’m all for this. I’d go even further and propose to make prefetching links by default the default such that there is an option to opt-out instead of opt-in. SvelteKit should be fast by default, not make the user search around for options to tweak to make it even faster. Instead of when to opt-in, the manual should simply clarify when to opt-out.

6reactions

Rich-Harriscommented, Aug 30, 2022

@Conduitry came up with a brilliantly simple solution to this problem the other day:

<nav>
  <svg viewBox="0 0 2 3" aria-hidden="true">
    <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
  </svg>
-  <ul>
+  <ul data-sveltekit-prefetch>
    <li class:active={$page.url.pathname === '/'}>
-      <a data-sveltekit-prefetch href="/">Home</a>
+      <a href="/">Home</a>
    </li>
    <li class:active={$page.url.pathname === '/about'}>
-      <a data-sveltekit-prefetch href="/about">About</a>
+      <a href="/about">About</a>
    </li>
    <li class:active={$page.url.pathname === '/todos'}>
-      <a data-sveltekit-prefetch href="/todos">Todos</a>
+      <a href="/todos">Todos</a>
    </li>
  </ul>
  <svg viewBox="0 0 2 3" aria-hidden="true">
    <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
  </svg>
</nav>

(Note that sveltekit:prefetch is changing to data-sveltekit-prefetch — https://github.com/sveltejs/kit/pull/6170.)

In other words: instead of just checking the element itself, we check its parents until we find a data-sveltekit-prefetch attribute. It’s therefore easy to opt your whole <body> into this behaviour.

In that case we’d need a way to opt out for a subtree:

<body data-sveltekit-prefetch>
  <!-- these are all prefetched -->
  <a href="/a">...</a>
  <a href="/b">...</a>
  <a href="/c">...</a>

  <!-- but these are not -->
  <div data-sveltekit-prefetch="off">
    <a href="/x">...</a>
    <a href="/y">...</a>
    <a href="/z">...</a>
  </div>
</div>

(In future we could add other modes besides ‘prefetch when a mouse/finger stops over a link’, like eager, which could mean ‘prefetch as soon as this link is created following navigation’.)

For consistency, it would be nice to do the same thing for data-sveltekit-reload and data-sveltekit-noscroll:

<div data-sveltekit-reload>
  <!-- all links inside here will trigger a full page reload... -->

  <div data-sveltekit-reload="off">
    <!-- ...except these ones -->
  </div>
</div>

<div data-sveltekit-noscroll="off">
  <!-- all links inside here will preserve the current scroll position... -->

  <div data-sveltekit-noscroll>
    <!-- ...except these ones -->
  </div>
</div>