Nextjs Pre-fetching

Nextjs의 Link 컴포넌트를 사용하면, 링크에 마우스를 올리거나 탭으로 이동하거나 스크린 리더로 접근할 시 자동으로 해당 링크의 페이지 리소스를 미리 다운받는다.

미리 가져온 경로의 렌더링 결과는 라우터의 클라이언트 측 캐시에 추가된다. 따라서 링크 이동 시에 로드 작업을 거치는 것보다 부드러운 사용자 경험을 제공할 수 있다.

useRouter() 의 prefetch 메소드를 사용하여 동적으로 경로를 미리 불러오게 할 수도 있다.

페이지를 구성하는 컴포넌트에서 정적 생성과 서버사이드 데이터 호출을 구현할 수 있다.

해당 페이지가 처음으로 렌더링될 때 또는 빌드 시점에 필요한 데이터를 미리 로드한다.