Esempi

Usa onIntent per iniziare un lavoro di preparazione sicuro e ripetibile. Le azioni irreversibili, come acquistare, inviare un messaggio o inviare un modulo, devono attendere il clic effettivo.

Prefetch di una rotta

Il caso d’uso più comune con Next.js.

<IntentLink href={href} onIntent={() => router.prefetch(href)}>
  {label}
</IntentLink>

Prepara i dati

Inserisci nella cache della libreria dati le informazioni necessarie alla schermata successiva.

<IntentLink
  href={`/product/${id}`}
  onIntent={() => queryClient.prefetchQuery({ queryKey: ["product", id] })}
>
  {name}
</IntentLink>

Precarica un’immagine

Inizia a caricare una risorsa pesante prima della navigazione.

<IntentLink
  href={`/product/${id}`}
  onIntent={() => {
    const image = new Image()
    image.src = heroImageFor(id)
  }}
>
  {name}
</IntentLink>

Prepara un componente

Usa useIntentTarget quando l’obiettivo non è un link.

const intentRef = useIntentTarget<HTMLButtonElement>({
  onIntent: () => { void import("./product-preview") },
})

return <button ref={intentRef}>Open preview</button>