Navigation Boost

By default, all internal links will be intercepted to load the partial page content into the layout using a fetch request. This allows you to create a single-page application (SPA) experience without the need for a full page reload.

To disable this behavior for specific links, add the target attribute to the anchor tag. This will prevent the link from being intercepted and the page from being loaded via XHR. For example, using target="_top" will force the link to open in the same tab.

docs/index.html


      <nav>
        <a href="/docs/chapter-1.html" >Intercepted</a>
        <a href="/docs/chapter-2.html" target="_top">Not intercepted</a>
      </nav>

Prefetching

To improve page loading times, you can use the data-prefetch attribute on links. This attribute preloads the partial page into the browser's cache as soon as the link becomes visible in the viewport.

docs/index.html


      <nav>
        <a href="/docs/chapter-1.html" >Chapter 1</a>
        <a href="/docs/chapter-2.html" data-prefetch>Chapter 2</a>
      </nav>

How It Works

data-prefetch adds an event listener to the link.
When the link enters the viewport, papeljs automatically fetches the partial page content and stores it in the browser's cache.
This ensures faster loading when the user clicks the link.

Prefetchin "ALL"

If you want to prefetch all the images in the next partial page, use the data-prefetch="all" attribute. This will:

Preload the next partial page.
Fetch all images within that page.
Start loading those images into the browser's cache.

docs/index.html


      <nav>
        <a href="/docs/chapter-1.html" data-prefetch="all">Chapter 1</a>
        ...
      </nav>