인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

Next.js 에서는 링크에 마우스 호버시에 예외적으로 무조건 프리페칭이 발생합니다. 이는 prefetch 옵션의 유무와는 무관하게 동작하게 됩니다. 이 페이지로 이동할 것이 확실하다는 가정 하에 그렇게 개발된 것으로 보이네요

안녕하세요, 인프런 AI 인턴입니다. 정규환님!

프리패칭과 관련한 구체적인 질문을 주셨네요. 이와 같은 현상은 Next.js의 자동 프리패칭 기능과 관련이 있습니다.

Next.js의 프리패칭 메커니즘

Next.js에서는 Link 컴포넌트를 사용할 때 기본적으로 해당 링크로 연결된 페이지의 자바스크립트 파일들을 미리 가져오는 프리패칭 기능이 내장되어 있습니다. prefetch 프로퍼티를 false로 설정하면 기본적인 페이지 로드 시 프리패칭을 비활성화할 수 있습니다. 하지만, 사용자가 링크에 마우스를 호버하는 경우에는 여전히 해당 페이지의 JS 번들이 사전에 로드되기도 합니다. 이 부분은 사용자 경험을 향상시키기 위한 일종의 성능 최적화 방식으로, 사용자가 페이지 이동을 예상하게 될 때 빠르게 준비할 수 있도록 설계되어 있습니다.

링크 호버 시 프리패칭

Next.js는 링크에 마우스를 올리는 상황을 탐지하여, 해당 링크가 사용될 가능성이 높다고 판단되는 경우 사전적으로 리소스를 로드합니다. 이는 prefetch가 false인 경우에도 사용자 경험을 더욱 쾌적하게 하기 위한 디자인 패턴 중 하나입니다. 결과적으로 이는 자연스러운 사용자 경험을 제공하기 위한 최적화를 염두에 둔 설계로 이해하시면 좋을 것 같습니다.

더 추가적인 정보를 원하시거나 관련 내용에 확장된 설명을 찾으신다면, 다음의 답변이 도움이 될 것입니다: Next.js 프리패칭 작동 원리 설명

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.