Prefetch (usePrefetch hook)

#26PerformanceEasy

Prefetch (usePrefetch hook)

Prefetch — usePrefetch Hook

Next.js의 <Link prefetch> 가 hover 시 다음 페이지 자원을 미리 fetch하는 패턴을 직접 만들어 보세요. <link rel="prefetch" href={...}> 를 동적으로 <head> 에 삽입해 브라우저가 유휴 시간에 자원을 가져오게 합니다.

요구사항

usePrefetch(href) 훅은 { onMouseEnter, onFocus } 핸들러를 반환
핸들러가 처음 호출될 때 <link rel="prefetch" href={href}> 를 document.head 에 삽입
같은 href에 대해 이미 link가 있으면 중복 삽입 안 함 (dedup)
핸들러가 호출되기 전엔 link 삽입 X
서로 다른 href는 별도 link로 삽입

힌트

document.head.querySelector('link[rel="prefetch"][href="..."]') 로 기존 link 존재 확인
document.createElement('link') → link.rel = 'prefetch', link.href = href → document.head.appendChild(link)

학습 포인트

<link rel="prefetch"> 의 실제 사용 — 브라우저에게 "이 자원 곧 필요" 라는 hint
React 훅으로 부수효과(DOM 조작) 캡슐화
hover/focus 기반 prefetch 트리거링 (Next.js Link, React Router prefetch 와 같은 패턴)

import { useCallback } from 'react';

export function usePrefetch(href: string) {
  // TODO:
  //   1) document.head에 link[rel="prefetch"][href=...] 가 이미 있는지 확인
  //   2) 없으면 <link rel="prefetch" href={href}> 생성 후 head에 appendChild
  //   3) 같은 href를 여러 번 trigger해도 link는 한 번만 삽입 (dedup)
  const handler = useCallback(() => {
    throw new Error('Not implemented');
  }, [href]);

  return { onMouseEnter: handler, onFocus: handler };
}

export function PrefetchLink({ href, children }: { href: string; children: React.ReactNode }) {
  const handlers = usePrefetch(href);
  return (
    <a href={href} {...handlers}>
      {children}
    </a>
  );
}

Open Sandbox

Sandpack 로드 중…

import { useCallback } from 'react';

export function usePrefetch(href: string) {
  // TODO:
  //   1) document.head에 link[rel="prefetch"][href=...] 가 이미 있는지 확인
  //   2) 없으면 <link rel="prefetch" href={href}> 생성 후 head에 appendChild
  //   3) 같은 href를 여러 번 trigger해도 link는 한 번만 삽입 (dedup)
  const handler = useCallback(() => {
    throw new Error('Not implemented');
  }, [href]);

  return { onMouseEnter: handler, onFocus: handler };
}

export function PrefetchLink({ href, children }: { href: string; children: React.ReactNode }) {
  const handlers = usePrefetch(href);
  return (
    <a href={href} {...handlers}>
      {children}
    </a>
  );
}

Open Sandbox