Ejemplos

onIntent puede iniciar cualquier trabajo de preparación seguro y repetible. Mantén las acciones irreversibles, como compras, mensajes y envíos de formularios, detrás de un clic real.

Precargar una ruta

El caso de uso habitual en Next.js.

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

Preparar datos

Pide a tu librería de datos que guarde en caché la información que necesitará la siguiente pantalla.

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

Precargar una imagen

Empieza a cargar un recurso grande antes de navegar.

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

Preparar un componente

Usa useIntentTarget cuando el objetivo no sea un enlace.

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

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