Skip to content

Add option to prefetch links by default #790

@Nick-Mazuk

Description

@Nick-Mazuk

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!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions