1.1 KiB
title
| title |
|---|
| Prefetching |
Sapper uses code splitting to break your app into small chunks (one per route), ensuring fast startup times.
For dynamic routes, such as our src/routes/blog/[slug].html example, that's not enough. In order to render the blog post, we need to fetch the data for it, and we can't do that until we know what slug is. In the worst case, that could cause lag as the browser waits for the data to come back from the server.
rel=prefetch
We can mitigate that by prefetching the data. Adding a rel=prefetch attribute to a link...
<a rel=prefetch href='blog/what-is-sapper'>What is Sapper?</a>
...will cause Sapper to run the page's preload function as soon as the user hovers over the link (on a desktop) or touches it (on mobile), rather than waiting for the click event to trigger navigation. Typically, this buys us an extra couple of hundred milliseconds, which is the difference between a user interface that feels laggy, and one that feels snappy.
rel=prefetchis a Sapper idiom, not a standard attribute for<a>elements