Prefetch System

The Prefetch system makes the application feel instant by pre-loading pages when a user hovers over a link, before they even click.

Table of Contents

1. How It Works
2. Usage & Configuration
3. JavaScript API

1. How It Works

The system uses a smart hover strategy to predict intent:

1. Hover Detect: When a user mouse-overs a link, a timer starts.
2. Intent Delay: If the mouse stays for 65ms, we assume intent to click.
3. Fetch: A fetch() request is sent in the background with X-Prefetch: true.
4. Cache: The HTML response is parsed and stored in an in-memory Map (max 5 mins).
5. Click: If the user clicks, we swap the body content instantly from cache instead of doing a full page reload.

2. Installation

3. Usage & Configuration

Smart Defaults

By default, prefetch is enabled for all internal links on the same domain.

It automatically skips:

• External links
• Download links (.pdf, .zip, etc.)
• Current page links
• Anchor links (#fragment)

Control via Attributes

You can control prefetch behavior using data-prefetch attributes in your HTML:

Logout
Not prefetchedNot prefetched
Heavy Page

Global Configuration

You can configure the system by setting window.PrefetchConfigbefore the scripts load:

3. JavaScript API

The system exposes a global window.Prefetch object:

// Manually prefetch a URL
Prefetch.prefetch('/admin/dashboard').then(cacheEntry => {
    console.log('Page loaded!', cacheEntry);
});

// Programmatic navigation (uses cache if available)
Prefetch.navigateTo('/admin/dashboard');

// Clear cache (useful after form submissions)
Prefetch.clearCache();

Events

Listen for events to re-initialize your own JavaScript components after a page swap:

window.addEventListener('prefetch:navigate', (e) => {
    console.log('Navigating to:', e.detail.url);
});

window.addEventListener('prefetch:loaded', () => {
    console.log('New content loaded!');
    // Re-initialize tooltips, graphs, etc.
    MyPlugin.init();
});