[NextJS] <Link />의 prefetch : 링크된 페이지의 데이터를 미리 로드

<Link prefecth />

: 사용자의 뷰포트에 Link 컴포넌트가 들어가면, 해당 링크에 설정된 페이지와 데이터를 미리 백그라운드에서 로드한다.

• Next.js는 Link 된 라우트(href에 지정된 라우트)와 해당 데이터를 백그라운드에서 미리 prefetch하고 load한다.
• 프로덕션 환경에서만 활성화된다. (개발 중에는 ❌)
• 정적 경로 vs 동적 경로
  
  • 정적 경로(pages 폴더에 있는 일반 파일) ➡ 자동 prefetch
  • 동적 경로([id].js 같은 파일) ➡ 설정에 따라 달라짐

export default function Movie({ title, id, poster_path }: IMovieProps) {
  const router = useRouter();
  const onClick = () => {
    router.push(`/movies/${id}`);
  };
  
  return (
    <div className={styles.movie}>
      <img src={poster_path} alt={title} onClick={onClick} />
      <Link prefetch href={`/movies/${id}`}> // ***
        {title}
      </Link>
    </div>
  );
}

 

---

 

Components: <Link> | Next.js