Intelligent Prefetching#

Keywords: page prefetch, fast transitions, prefetch link, hover prefetch

Asok's Reactive Engine includes a prefetching system that can reduce navigation latency by background-loading HTML fragments before the user clicks a link.

How it works#

1. Detection: The engine identifies all elements with data-block or data-url that use the default click trigger (like links).
2. Trigger: When a user hovers (mouseover) over such an element, Asok immediately starts fetching the associated fragment.
3. Caching: The fetched HTML is stored in a client-side memory cache.
4. Instant Swap: When the user finally clicks the link, Asok checks the cache. If the fragment is already there, it performs the swap instantly without a network round-trip.

Example#

<!-- Hovering over this link triggers a pre-fetch of #main from /profile -->
<a href="/profile" data-block="main" data-push-url>View Profile</a>

You do not need to configure it separately — it is active by default for all data-block links.

Optimization Details#

• Safe consuming: Each cached fragment is consumed once. If you click again later, a new fetch will occur (unless you hover again).
• Reduced Latency: Prefetching typically happens during the "mouse dwell time" (the 200-400ms between hovering and clicking), which is often enough time to fetch the entire fragment.
• Bandwidth Aware: Only fragments (small HTML blocks) are prefetched, not full pages.
• Header identification: Prefetch requests send X-Prefetch: 1 header, allowing you to optimize server-side logic if needed.

Verification#

To see it in action:

1. Open your browser's Network tab.
2. Hover over a link with data-block.
3. You will see a fetch request occur immediately.
4. Click the link.
5. Notice that no new request is made (or a very short one if it wasn't finished), and the page updates instantly.

Use prefetching combined with data-indicator to provide immediate feedback if a pre-fetch hasn't finished yet when the user clicks.