[Next] 프리페칭(Pre-fetching)이란?

Next.js는 사전 렌더링(SSR, SSG 등)을 사용하여 초기 접속 시 빠른 로딩과 SEO 최적화를 제공합니다. 하지만 초기 접속 이후, 페이지 전환은 CSR(Client-Side Rendering) 방식으로 처리됩니다. 이 과정에서 프리페칭(Prefetching)을 통해 추가적인 성능 향상을 이룰 수 있습니다.

🎀 CSR과 JS 번들 로드

Next.js는 페이지 이동 시 필요한 데이터를 서버에 요청하고, 해당 페이지의 JavaScript 번들 파일을 받아와 화면을 렌더링합니다. 페이지 이동 시마다 JS 번들을 서버에서 받아오게 되면 로딩 속도가 느려질 가능성이 있습니다.

이를 해결하기 위해 프리페칭을 사용하면, 현재 페이지와 연결된 다음 페이지의 JS 번들 파일을 미리 받아와 로딩 시간을 줄일 수 있습니다.

🎄 프리페칭의 작동 원리

1. Link 컴포넌트와 프리페칭
   Next.js의 Link 컴포넌트를 사용하면, 해당 링크가 화면에 보일 때 자동으로 연결된 페이지의 JS 번들 파일을 미리 가져옵니다. 이 기능은 사용자의 페이지 전환을 보다 빠르게 만듭니다.

import Link from 'next/link';

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

▶ 위 코드에서 /about 페이지는 화면에 렌더링된 이후 백그라운드에서 프리페칭됩니다.


2. 프리페칭 비활성화
만약 특정 링크에 대해 프리페칭을 원하지 않는 경우, prefetch={false}를 설정하여 비활성화할 수 있습니다.

<Link href="/contact" prefetch={false}>
  <a>Go to Contact Page</a>
</Link>

3. useRouter를 활용한 수동 프리페칭
   Link 컴포넌트를 사용하지 않는 경우에도, useRouter를 통해 특정 페이지의 JS 번들을 수동으로 프리페칭할 수 있습니다.

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Home() {
  const router = useRouter();

  useEffect(() => {
    router.prefetch('/about');
  }, []);

  return (
    <div>
      <h1>Home Page</h1>
      <a href="/about">Go to About Page</a>
    </div>
  );
}

▶ 위 코드는 /about 페이지를 수동으로 프리페칭하여, 페이지 전환 시 로딩 속도를 향상시킵니다.

🛎️ 프리페칭의 한계

• Link 컴포넌트로 만들어진 경우에만 유일하게 자동 프리페칭이 동작합니다.
• a 태그처럼 일반적인 HTML 링크나, JavaScript 이벤트로 페이지를 이동하는 경우에는 프리페칭이 동작하지 않습니다. 따라서 필요하다면 useRouter.prefetch를 수동으로 호출해야 합니다.

🍪 정리

1. Next.js에서 CSR 페이지 전환 성능을 최적화하려면 프리페칭을 활용해야 합니다.
2. Link 컴포넌트를 사용하면 기본적으로 프리페칭이 활성화됩니다.
3. 특정 링크의 프리페칭을 비활성화하거나, 필요 시 useRouter.prefetch로 수동 프리페칭을 수행할 수 있습니다.
4. 프리페칭은 사용자의 네트워크 상태를 고려해야 하므로, 무분별한 사용은 피하는 것이 좋습니다.