NextJS Link prefetch props 알아보기
NextJS에서 제공하는 Link 컴포넌트는 기본적으로 뷰포트 내에 들어오면 자동으로 prefetch하는 기능이 있다. (14 버전 기준)
이러한 동작도 prefetch prop에 따라 나뉘는데, 기본값은 null이고 boolean값을 넘겨줄 수 있다.
null일때, Link는 대상 route (href)가 정적인지 동적인지에 따라 다르게 동작한다. 정적 경로일시에는 전체 데이터를 prefetch 해온다. 동적 경로일시 loading.js 경계까지의 데이터만 부분적으로 가져온다. loading.js가 없는 경우 prefetch가 동작하지 않는것 같다.
true일때, 정적, 동적 경로 상관없이 모든 데이터를 prefetching 해온다.
false일때, 어떤 경우라도 prefetching 하지 않는다 (뷰포트 내 들어오거나 hover시에도)
loading.js란??
간단히 말해서 Next 경로 기반 라우팅 계층에서 layout과 page 사이에 존재하는 계층이다. 그래서 loading.tsx가 존재할 시 layout.tsx까지 데이터를 prefetching 해오는 듯하다.