[Next.js] 페이지 사전 로드(prefetch)

Next.js의 Link 컴포넌트를 사용할 때, prefetch 속성을 false로 설정하면 페이지 사전 로드(prefetch) 기능을 비활성화할 수 있습니다.

Next.js는 Link 컴포넌트를 사용하여 클라이언트 사이드 라우팅을 지원합니다. 이를 통해 페이지 간 전환 시 새로운 페이지의 코드 및 데이터를 사전 로드하여 사용자 경험을 향상시킬 수 있습니다.

기본적으로 Next.js는 Link 컴포넌트를 사용한 링크를 만나면 해당 페이지의 코드와 데이터를 미리 가져옵니다.

이렇게 사전 로드된 페이지는 사용자가 실제로 링크를 클릭하기 전에 미리 준비되어 있어 빠른 페이지 전환을 가능하게 합니다.

하지만 prefetch 속성을 false로 설정하면 Next.js는 해당 링크의 페이지를 사전 로드하지 않습니다. 이는 일부 상황에서 유용할 수 있습니다. 예를 들어, 사용자가 큰 용량의 페이지를 접속할 것으로 예상되는데도 불구하고 현재 페이지와 관련이 없는 링크를 포함하는 경우, 불필요한 리소스를 사전 로드하지 않아 초기 페이지 로딩 속도를 개선할 수 있습니다. 또는 특정 링크를 사용자가 클릭하기 전까지는 미리 로드할 필요가 없는 경우에도 prefetch를 비활성화할 수 있습니다.

아래는 prefetch 속성을 false로 설정한 예시입니다.

import Link from 'next/link';

const MyComponent = () => {
  return (
    <Link href="/some-page" prefetch={false}>
      <a>Go to Some Page</a>
    </Link>
  );
};

위의 코드에서 prefetch={false}로 설정된 Link 컴포넌트는 해당 페이지를 사전 로드하지 않으며, 사용자가 링크를 클릭할 때 비로소 페이지를 로드하게 됩니다.

이렇게 prefetch 속성을 사용하여 Next.js의 Link 컴포넌트에서 페이지 사전 로드 기능을 제어할 수 있습니다.