Prefetch

2025.1.15 수요일의 공부기록

Next.js의 Link 컴포넌트는 클라이언트 사이드 네비게이션 성능을 최적화하기 위해 prefetch 속성을 제공한다.
prefetch는 백그라운드에서 라우트와 데이터를 미리 로드하여 사용자가 링크를 클릭했을 때 빠른 페이지 전환을 가능하게 한다.

---

prefetch란?

prefetch는 백그라운드 로드 기능으로, Link 컴포넌트가 뷰포트에 들어올 때 해당 라우트와 데이터를 미리 로드한다.
이를 통해 클라이언트 사이드 네비게이션 속도를 대폭 향상시킬 수 있다.

주요 특징

1. 자동 로드
   • prefetch는 기본적으로 활성화되어 있으며, Link 컴포넌트가 초기 로드되거나 뷰포트에 진입하면 작동한다.
2. 프로덕션 환경에서만 활성화
   • 개발 모드에서는 동작하지 않고, 프로덕션 환경에서만 활성화된다.
3. 기본값
   • prefetch 속성의 기본값은 null이다. 이 경우 Next.js가 자동으로 경로에 따라 prefetch 동작 여부를 결정한다.

---

prefetch 동작 방식

동작 시점

1. 초기 렌더링
   페이지 로드 시, 뷰포트에 있는 모든 Link 컴포넌트에 대해 prefetch가 작동한다.

2. 스크롤 중 동작
   사용자가 스크롤하여 Link 컴포넌트가 뷰포트에 들어오면 Next.js가 해당 라우트를 미리 로드한다.

3. 클릭 시 빠른 페이지 전환
   prefetch된 라우트와 데이터가 이미 로드되어 있어, 클릭 시 빠르게 전환된다.

---

prefetch 속성의 사용 방법

기본 설정

prefetch 속성을 명시적으로 설정하지 않아도 기본적으로 prefetch가 활성화된다.

import Link from "next/link";

export default function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">Go to About</Link>
    </div>
  );
}

실습코드

"use client";

import Link from "next/link";
import styles from "../../styles/movie.module.css";
import { useRouter } from "next/navigation";

interface IMovieProps {
  title: string;
  id: string;
  poster_path: string;
}

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}`}> //prefetch 적용
        {title}
      </Link>
    </div>
  );
}

명시적 설정

1. prefetch 활성화

   <Link href="/about" prefetch={true}>
     Go to About (Prefetch Enabled)
   </Link>

2. prefetch 비활성화

   <Link href="/about" prefetch={false}>
     Go to About (Prefetch Disabled)
   </Link>

---

prefetch가 필요한 경우와 비활성화가 적합한 경우

필요한 경우

• 네비게이션 속도 향상
  사용자가 자주 방문할 경로를 미리 로드하여 페이지 전환 속도를 높이고 사용자 경험을 개선하고자 할 때.
• 정적 경로
  미리 로드가 가능한 정적 HTML이나 데이터를 빠르게 제공하기 위해 사용한다.

비활성화가 적합한 경우

• 불필요한 경로 로드 방지
  사용 가능성이 낮은 경로의 리소스를 미리 로드하는 것은 불필요한 네트워크 비용을 초래할 수 있다.
• 대용량 데이터 Fetching
  리소스가 크거나 네트워크 비용이 높은 경우, prefetch를 비활성화하여 성능과 비용을 최적화한다.

---

prefetch 동작 확인 방법

프로덕션 환경에서만 작동

prefetch 동작은 프로덕션 환경에서만 활성화되므로, 개발 환경에서는 테스트할 수 없다.

프로덕션 테스트 방법

1. 프로덕션 빌드 생성

   npm run build

2. 프로덕션 서버 실행

   npm start

3. 브라우저 네트워크 탭 확인
   개발자 도구에서 네트워크 탭을 열고 prefetch된 리소스를 확인한다.

자세한 내용은 Next.js 공식 문서를 참고.