Turbolinks-prefetch NPM

Turbolinks Prefetch

Turbolinks extend for prefetch links to speeds up your website.

WorkFlow

hover --> [prefetch] --<no cache>--> [XHR fetch] -> [Turbolinks cache.put]
              |
          <exist cache / in fetching>
              |
            ignore

click --<check cache>-- exist --> [isPrefetch] -> [Turbolinks.visit advance] ---> [render page]
             |                         |                 |
             |                         |                 --async-> [fetch background] -> [render if updated]
             |                         |
             |                       <Yes>
             |                         |--- [Turbolinks.visit restore] --> render -> nothing
          No cahce
             |
             ---> [Turbolinks.visit]

Installation

$ yarn add turbolinks-prefetch

Usage

import Turbolinks from 'turbolinks';
window.Turbolinks = Turbolinks;

import TurbolinksPrefetch from 'turbolinks-prefetch';
TurbolinksPrefetch.start();

Prefetch request will send Purpose: prefetch header, so you may need this to ignore some thing.

For example views count increment:

class TopicsController < ApplicationController
  def show
    if request.headers["Purpose"] != "prefetch"
      # Ignore hit counter for prefetch request
      @topic.increment_hit
    end
  end
end

Disable prefetch

By default, TurbolinksPrefetch will enable prefetch for all links.

Except:

Links not have same host (Origin);
Open in new window links target="_blank";
The links has data-remote attribute;
The links has data-method attribute;
The links has data-prefetch="false" attribute;

If you wants disable prefetch, you can do like this:

<a href="https://google.com">Google</>
<a href="/topics/123" target="_blank">Open in new window</a>
<a href="/topics/123" data-method="PUT" data-remote>Put</a>
<a href="/topics/123" data-method="DELETE">Delete</a>
<a href="/topics/123" data-prefetch="false">Disable by directly</a>