Instantaneous Navigation

Sapper uses prefetching the pages to make navigation instantaneous. Let's see how prefetching works.

We'll cover the following

Instantaneous navigation by Sapper

Sapper automatically breaks up the application into small chunks, one per route. With that, a user who accesses /about only needs to download the HTML, JavaScript, & CSS required to display the about page.

Example

To go a step further, let’s imagine the following user journey:

  1. The user loads the homepage.
  2. The user sees a link to the About Us page.
  3. The user clicks on the About Us page.
  4. The About Us page is displayed.

Behind the scenes, there is a magic step between steps 2 and 3. While navigating a web page, when a desktop user hovers over the link or a mobile user touches it, Sapper prefetches the target page before the click event triggers the navigation.

To enable that, Sapper supports a rel="prefetch" attribute on the <a> tag, such as:

<a rel="prefetch" href="about">About Us</a>

The Sapper docs explain that it programmatically prefetches the page given in href, which means it:

  • Ensures that the code for the page is loaded.
  • Calls the page’s preload method with the appropriate options, which is typically used to load data that the page depends on. This prevents the user from seeing the page update as it loads, as is typically the case with client-side loading.

Get hands-on with 1200+ tech skills courses.