Pre-Fetching

1. Pre-Fetching

   Pre-Fetching : 페이지를 미리 불러온다.

   현재 사용자가 보고 있는 페이지에 있는 링크나 버튼들로 갈 수 있는 페이지들의 번들파일을 불러와 pre-fetching한다.

-> 빠른 페이지 이동이 가능

 

※  프리페칭이 필요한 이유!

리액트에서 빈 화면 이후에 페이지 렌더링 시 JS코드를 번들링해서 받을 때 현재 페이지에 필요한 JS 코드들만 전달 받음.

넥스트에서 모든 페이지의 번들파일을 받을 경우 용량이 커지며 하이드레이션이 늦어짐 -> 리액트와 같은 방식으로 현재 페이지의 번들 파일만 받게 되지만 페이지 이동시 다시 번들 파일을 받아야 함. -> 이때 필요한 것이 프리페칭!

 

 

아래 사진에서 현재 페이지에 Link로 페이지 이동이 가능한 페이지에 필요한 JS코드를 프리페칭한 것을 볼 수 있다.

네트워크 탭에서 확인 가능한 pre-fetching

 

 

Q. 링크 컴포넌트에 명시한 경로가 아닌 페이지에 관련된 JS코드를 프리패칭하려면?

마운트 되었을 때 프리패칭하도록 해야 한다.

// 버튼으로 이동할 /test에 관련된 JS코드 프리패칭
const onClickButton = () => {
    router.push("/test");
};

useEffect(() => {
    router.prefetch("/test");
}, []);

 

Q. 링크 컴포넌트에 명시한 경로에 대한 JS코드를 프리패칭하지 않도록 하려면?

// 링크 컴포넌트의 prefetch props를 false로 함
<Link href={"/search"} prefetch={false}>search</Link>