Link Options

[00:00:00]
>> Okay, so we've just talked about page options. We also have options that apply to individual links in our app. In this exercise here we have a slow/a route and a slow/b route. And both of those have artificial delays like the ones that we've seen elsewhere, meaning it takes a long time to navigate to them.

[00:00:18]
If I click on this link, the page doesn't update until that second delay has gone by. Now, ideally you would just make your navigation quicker, you would speed up whatever the bottleneck is in your data fetching, but sometimes that's not an option. SvelteKit cannot make your navigations faster in that case, but it can make things seem faster by anticipating them.

[00:00:42]
When an anchor element, an a element has a data-sveltekit-preload-data attribute, SvelteKit will begin the navigation as soon as the user hovers over the link. If they're using a desktop device or if they're on a mobile, as soon as they tap it. So let's add that to the first link in our navigation.

[00:00:59]
Open your layout.svelte. And down here, we're gonna add that data-sveltekit-preload-data attribute. And now if we go to slow/b which doesn't have that attribute, it's gonna take that full second. But if we go over to slow/a and click the link, then it'll take a second minus however long you are hovering over the link in the first place.

[00:01:28]
So it'll be noticeably faster, even if it's a more typical move over and click, we're still saving a few hundred milliseconds there. So in practice, even though it might not sound like it's gonna make much of a difference to save a couple of hundred milliseconds here or there, it's very often the difference between a navigation that feels sluggish and a navigation that feels snappy.

[00:01:52]
Now, you can put that attribute on individual links like we've done here. Or you can put it on any element that contains links, right? So we could put it on the nav, for example. And in fact, when you set up a new SvelteKit project, by default that attribute will exist on the body element in your app.html, although we don't have it here in the tutorial.

[00:02:15]
You can customize the behavior further by specifying a value for preload data. You can use preload data equals hover, which is the default, or you can specify tap in which case preloading will only begin when the user actually taps on the link. Or you can turn it off altogether, in which case the navigation won't begin until a click event has been registered on the link.

[00:02:43]
All right, and the reason that you would do that is that sometimes the behavior that comes out of the box will result in false positives, and that might not be what you want. You might wanna preserve data or you might wanna make sure that when the user clicks on a link that you're getting the up to the minute data.

[00:02:57]
If you're doing something that's heavily real time like a stock tracker app or something of that nature. If you don't wanna do any preloading of data at all, then you can still preload the code for a new route by changing this data here to code then we will preload any code that is needed for SvelteKit to navigate to the new route, but it won't run any data fetching.

[00:03:22]
And this gives us a few new options. You can preload code eagerly, which means that it will get the code for every link on the page after every navigation. You can set viewport, which means that SvelteKit will fetch the code for the new route as a link enters the viewport.

[00:03:38]
Or you can use the same options as with preload data. Finally, you can also initiate preloading programmatically if you need to by importing the preload code and preload data functions from the app navigation module. As we've seen, ordinarily when you navigate between pages, it does that without reloading the page.

[00:04:01]
It does a client site navigation instead. So here if we navigate between the homepage and the about page, you'll see that timer at the bottom which is in our layout, that just keeps on ticking up. In some cases you might wanna disable client-side routing and you can do so by adding the data-sveltekit-reload attribute on any individual link or again on any element that contains links.

[00:04:25]
So let's go into our nav in the layout.svelte component and add data-sveltekit-reload. And now you'll see as long as we're on the page the timer is ticking up, but as soon as we navigate it's gonna reset the timer because we've reloaded the document from the server. So you can learn more about the link options that are available and the values that you can put on them in the link options documentation on the SvelteKit website.