[Next.js] page router - 프리페칭

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
2.4) 프리페칭

2.4 프리페칭

프리페칭(Pre-Fetching)이란?

현재 보고 있는 페이지에서 링크들을 통해 이동할 수 있는 모든 페이지들의 자바스크립트 코드를 사전에 미리 다 불러오는 기능

 

프리페칭이 필요한 이유

사전 렌더링 파트에서 원래 Next.js에서 초기 접속 요청이 발생하면 서버가 브라우저에게 html 페이지를 응답한 이후에 후속으로 모든 자바스크립트 코드를 번들 파일 형태로 전달을 해주고, 모든 자바스크립트 코드를 번들 파일 형태로 전달해주기 때문에 페이지 이동이 발생했을 때 서버에게 별도의 요청 없이 브라우저에서 자바스크립트 코드를 실행시켜서(클라인언트 사이드 렌더링) 알아서 처리를 한다고 했다.

 

Next.js는 모든 자바스크립트 코드들을 자동으로 페이지별로 스플리팅(분리)해서 저장을 해둔다.

그래서 사전 렌더링의 과정에서 JS 번들 파일을 전달할 때 모든 페이지에 필요한 JS 코드가 다 전달되는 것이 아닌, 현재 페이지에 해당하는 자바스크립트 코드들만 전달이 된다. (전달되는 JS 코드의 양을 줄이기 위해)

 

그렇기 때문에 현재 페이지에서 다른 페이지로 이동하기 위해선 이동하려는 페이지에 필요한 JS 코드를 추가로 불러와야 하는데 현재 페이지와 같이 현재 페이지에 해당하는 JS 코드를 불러오려면 페이지 이동이 느려지게 된다.

 

이러한 문제를 방지하기 위해 프리페칭 기능을 사용한다. 

 

실습

run dev 개발 모드로 가동해 놓고 있을 때에는 프리패칭이 동작하지 않는다.

따라서 프리패칭 동작을 제대로 확인하기 위해선 프로덕션 모드로 실행시켜야 한다.

프로덕션 모드 : npm run build (build 결과에서 각 페이지 별로 JS 번들의 용량을 확인할 수 있다.)

npm run start로 넥스트 앱 프로덕션 모드로 실행

index 페이지를 열면 search, book 페이지에서 필요한 JS 를 미리 불러와 놓은 걸 볼 수 있다. 

따라서 search, book으로 이동하면 추가적인 요청이 안일어나는 것을 볼 수 있다.

 

프리페칭이 안일어나는 예외 사항(프로그래메틱하게 페이지를 이동한 경우)

프로그래메틱하게 페이지를 이동하도록 설정해둔 경우, 프리페칭이 일어나지 않는다.

Link 컴포넌트로 명시된 경로는 프리페칭이 잘 된다.

 

📍프로그래메틱한 경우 프리페칭이 일어나도록 하기 위해서

컴포넌트가 화면에 마운트 되었을 때 라우터 객체의 특정 메서드를 통해 직접 프로그래메틱하게 프리페칭하도록 설정해주면 된다.

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

 

Link 컴포넌트의 프리페칭을 강제로 해제하는 방법

<Link href='/search' prefetch={false} >Page</Link>

search는 프리페칭 되지 않음을 볼 수 있다.