프리패칭 (Pre-fetching)

프리패칭 (Pre-fetching)?

프리패칭 (Pre-fetching)은 페이지 이동을 매우 빠른 속도로 지체 없이 처리하기 위해
현재 보고 있는 페이지에서 링크를 통해 이동할 수 있는 모든 페이지들을 사전에 불러와놓는 기능을 의미한다.

그런데 한 가지 이상한 점이 있다. Next.js는 분명 유저의 초기 접속 이후에 추가적인 서버 요청 없이
브라우저에서 직접 자바스크립트 코드, 즉 리액트 앱을 직접 실행시켜서 렌더링에 필요한 컴포넌트들을 교체하는
CSR 방식으로 처리하게 되는데 왜 프리패칭 같은 기능이 필요할까?

프리패칭이 필요한 이유

사실 Next.js는 우리가 작성해 주었던 모든 자바스크립트 코드(컴포넌트)들을 페이지별로 스플리팅해서 저장해 둔다.

따라서 사전 렌더링 과정에서 JS 번들 파일을 전달할 때 모든 페이지에 필요한 자바스크립트 코드가 전달되는 게 아니라 현재 페이지에 해당하는 자바스크립트 코드들만 전달이 되기 때문이다.

이렇게 동작하는 이유는 이 과정에서 전달되는 자바스크립트 코드의 양을 줄이기 위함임.

이렇게 되면 초기접속 이후 페이지를 이동하려고 할 때 해당 페이지의 js코드를 불러와야하는 비효율적인 페이지 이동이 발생한다.

그래서 프리패칭(Pre-fetching) 기능이 필요한 것이다.
초기 접속이 완료된 이후 곧바로 페이지 이동이 이루어지기 전에 프리패칭을 수행하게된다.

이러한 방식을 통해 Next.js는 초기접속 요청 시에 하이드레이션을 더 빠르게 처리할 수 있도록 만들어주면서,
초기접속 이후 페이지 이동도 빠르게 처리할 수 있도록 작동하는 것이다.

유의사항

프리패칭은 기본적으로 Link컴포넌트로 명시된 경로가 아니라면 동작하지 않는다. 예를들어

const onClickButton = () => {
  router.push('/test');
};

// Programmatic한 경로 이동의 프리패칭
useEffect(() => {
  router.prefetch('/test');
}, []);

// 프리패칭 필요 없음
<Link href={'/search'} prefetch={false}>
  search
</Link>

위 코드 처럼 함수로 라우터를 통해 경로를 변경하게 된다면 useEffect로 라우터 객체의 prefetch메서드를 호출해서 인수로 어떤 페이지를 프리패칭 할 것인지 넣어주면 Programmatic한 경로 이동도 프리패칭이 가능하다.

반대로, 잘 접근하지 않을 것 같아 굳이 프리패칭이 필요하지 않은 경우엔
Link컴포넌트에 prefetch라는 props를 false로 전달해주면 Next.js는 해당 페이지를 프리패칭하지 않는다.