Data Attributes
Individual links are configured with data-foresight-* attributes, the same way Astro's own prefetch uses data-astro-prefetch. Data attributes win over rules, which win over linkDefaults.
<a
href="/pricing"
data-astro-prefetch="foresight"
data-foresight-hit-slop="10 40"
data-foresight-name="pricing-cta"
data-foresight-reactivate-after="30000"
data-foresight-enabled="true"
>
Pricing
</a>
If you prefer typed props over attributes, use the <ForesightLink> component, which renders exactly this.
Available options
These map to the core registration options of the same name:
| Attribute | Type | Description |
|---|---|---|
data-foresight-hit-slop | margin shorthand | Invisible margin around the link that expands its hit area |
data-foresight-name | string | Debug name shown in the devtools and events |
data-foresight-reactivate-after | number (ms) | Time after which the link can trigger again |
data-foresight-enabled | boolean | Set to "false" to keep the link registered but inactive |
data-foresight-hit-slop uses CSS margin shorthand with 1 to 4 values (top right bottom left):
<a data-foresight-hit-slop="20">…</a>
<!-- 20 on all sides -->
<a data-foresight-hit-slop="10 40">…</a>
<!-- 10 top/bottom, 40 left/right -->
<a data-foresight-hit-slop="10 40 20 5">…</a>
<!-- top right bottom left -->
The callback is always Astro's prefetch() for the link's href. For a custom callback or meta (options that can't be serialized into attributes), use registerForesight.