예제

onIntent로 안전하고 반복 가능한 준비 작업을 시작하세요. 구매, 메시지 전송, 폼 제출처럼 되돌릴 수 없는 작업은 실제 클릭 뒤에 실행해야 합니다.

경로 프리페치

가장 일반적인 Next.js 사용 사례입니다.

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

데이터 준비

다음 화면에 필요한 정보를 데이터 라이브러리의 캐시에 넣습니다.

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

이미지 미리 로드

이동하기 전에 큰 에셋 로드를 시작합니다.

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

컴포넌트 준비

대상이 링크가 아니라면 useIntentTarget을 사용하세요.

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

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