tinyyard

prefetching이란?

pre + fetching. 미리 fetch하는 것을 말한다.
단어의 의미는 그렇고 기술적으로 어떤 의미일까?
여러가지 기술적인 의미를 가지고 있다.
웹 개발에 prefetching은 link prefetching이라고 볼 수 있다.
어떤 웹 사이트 또는 앱의 인덱스는 자기로 부터 navigate될 수 있는 여러 link를 포함할 수 있다.
보통 A 페이지에 들어가면 A페이지에만 필요한 assets만 fetch하고 A 페이지에서 링크를 통해 B페이지에 들어가면 B 페이지의 assets을 fetch하는 것을 일반적이라고 생각해볼 수 있다.
A 페이지에서 미리 B 페이지의 assets을 fetch하는 것을 prefetching이라고 한다.

navigate할 또는 할 예정인 link의 assets을 미리 fetch하게 되면 prefetching을 적용하기 전보다 빠른 navigation으로 UX에 긍정적인 영향을 주기 때문이다.

nextjs에서 prefetching은 link과 관련된 javascript 파일만 prefetch 한다.
nextjs에서는 prefetching할 Link를 직접 설정할 수 있다.
prefetching을 쉽게 적용하는 방법은 next/link의 Link 컴포넌트를 이용하여 route를 설정하는 것이다.
Link 컴포넌트에 명시한 href과 관련된 js를 자동으로 prefetch 한다. - Link 컴포넌트는 prefetch라는 props를 받는데, default가 true이다.
Link 컴포넌트를 사용하지 않고 next/router의 router를 이용하여 route를 설정하는 경우, 추가 작업이 필요하다.
router.prefetch(href) 를 통해 어떤 route를 prefetch할 것인지 명시 해주면 된다.
대신 1. 프로덕션 환경에서만 prefetch를 수행한다. 2. useEffect안에 prefetch 문을 넣어야 한다.
비교를 위해 프로덕션 환경에서 테스트를 해보기로 한다.
테스트 해볼 앱은 커머스 앱으로 홈인 /와 /products/[id] route가 있다.
먼저 prefetch를 적용하지 않는 환경이다.
여러 chunks가 보이는데 /products/[id] 와 관련된 js는 prefetch되지 않았다.
그 다음 prefetch를 해보았다. index.typescript에 다음 코드를 넣어 준다.

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