[NextJS] Prefetching

Routing과 Navigation은 어떻게 작동할까?

NextJS의 App Router는 routing과 navigation에 하이브리드 접근을 사용한다.
Server에서는, 자동적으로 코드가 route segment 단위로 쪼개진다. 그리고 Client에서는, NextJS가 route segments를 prefetch와 cache를 수행한다.

이게 무슨 의미냐?

사용자가 새로운 route(경로)로 이동할 때, 브라우저가 페이지를 reload하는게 아니고 단지 변하는 route segments를 re-render한다는 의미이다.

이렇게 되면, navigation의 경험과 성능을 향상시킬 수 있다.

Prefetching

Prefecthing은 사용자가 방문하기 전에 백그라운드에서 route를 preload하는 것을 의미한다.

Prefecthing에는 2가지 방식이 있다.

• <Link> 컴포넌트 : Routes는 사용자가 보는 화면(viewport)에 보일 때 자동적으로 prefetch된다. 이때, Prefecthing은 페이지가 처음 로드됐을 때 또는 스크롤을 통해 보여졌을 때 발생한다.
• router.prefetch(): useRouter훅은 route를 prefetch 조작할 때 사용된다.

<Link>의 prefetching 방식은 route의 방식이 어떤 것이냐에 따라 다르게 작동한다.

• Static Routes: 기본적으로 prefetch는 true로 설정되어있다. 전체 Route가 prefetch, cache 된다.
• Dynamic Routes: 기본적으로 prefetch는 자동으로 설정되어있다. 오직 첫번째 loading.js 파일이 30초동안 prefetch되고 cach될 때까지 공유하고 있는 layout만 다운로드된다. 이는, 전체 dynamic route를 fetch하는데에 필요한 비용을 줄인다. 즉, 사용자에게 더 나은 시각적인 피드백을 주기 위해 즉각적인 로딩 상태를 보여줄 수 있다는 것이다.

Prefecthing은 prefetch를 false로 설정함으로써 비활성화할 수 있다.

알면 좋은 것

• Prefetching은 개발(development)모드에서는 활성화되지 않고, 오직 배포(production)모드에서만 활성화된다.