인프런 커뮤니티 질문&답변
작성한 질문수
prefetch 속성 질문
해결된 질문
작성
·
48
1
섹션 3. Page Router 핵심정리
12.2.4)프리페칭
안녕하세요 프리페칭 관련하여 실습을 진행하던 중 궁금한 사항이 있어서 질문드립니다 !
Next.js는 요청한 페이지의 js 번들과 현재 페이지 내에서 이동할 것 같은 페이지(Link 태그 및 router.prefetch로 설정한 페이지)를 프리페칭 한다고 배웠습니다.
근데 이때, Link 태그를 사용한 페이지 중 이동이 적을 것 같은 페이지는 <Link href="/" prefetch={false}>를 통해 프리페칭을 막을 수 있다고 배워 해당 내용을 실습했습니다.
근데 처음에 강력 새로고침을 진행하면 초기에는 프리페칭을 하지 않지만 약 5초 정도 지나면 추후에 제가 prefetch={false}로 설정한 Link 태그 js 번들 파일을 네트워크 탭에서 불러오는 것 같아 왜 그런지 궁금하여 질문드립니다.
답변 2
1
안녕하세요 이정환입니다.
혹시 링크에 마우스를 호버하시지는 않았을까요?!
링크에 마우스를 호버 할 경우 prefetch Prop을 false로 설정해 두었더라도 사용자가 곧 이 페이지로 이동할 것이라고 간주하여 프리페칭이 동작하게 됩니다. 확인 부탁드릴게요 😃
0
안녕하세요, 인프런 AI 인턴입니다. ReKoding님!
Next.js의 프리페칭 동작에 대해 구체적인 질문 주셔서 감사합니다. 말씀하신 문제는 Next.js의 프리페칭 메커니즘과 연관이 있는데요, 이를 이해하기 위해 몇 가지 핵심 내용을 정리드리겠습니다.
Next.js의 자동 프리페칭 동작 이해
Next.js에서는 Link 컴포넌트를 사용할 때, 링크된 페이지의 JavaScript 번들을 기본적으로 미리 가져오는 프리페칭 기능이 포함되어 있습니다. 이 기능은 사용자가 링크를 클릭하기 전에 빠르게 연결 페이지의 자원을 준비하도록 돕습니다. prefetch={false}를 설정하면, 자동으로 이루어지는 프리페칭을 방지할 수 있습니다. 그러나 특정 경우에 리소스가 미리 로드될 수 있습니다.
프리페칭이 발생하는 이유
Dev 환경에서의 캐시 관리: 개발 환경에서는 HTTP 캐시나 서비스 워커가 예기치 않은 자원 로드를 유도할 수 있습니다. 이런 경우 네트워크가 아닌 캐시에서의 로드가 진행될 수 있습니다.
네트워크 및 브라우저 최적화: 브라우저나 네트워크에서 페이지 전환의 부드러움을 위해 이를 미리 예측하고 로드하는 최적화가 있을 수 있습니다.
Next.js의 내부 최적화: 사용자가 페이지를 반복적으로 조회할 가능성이 있을 때, 여러 상황을 대비한 추가적인 최적화 로직이 내장되어 있을 수 있습니다.
문제 해결 방법
- 개발자 도구 확인: 개발자 도구의 네트워크 탭에서 언제 어떤 방식으로 리소스가 로드되는지 상세히 확인합니다. “Disable cache” 옵션을 활성화하여 캐싱의 영향을 배제할 수 있습니다.
- 코드 및 설정 검토: 코드 내의 다른 부분에서
router.prefetch()가 사용되고 있지는 않은지 확인합니다.
관련된 논의를 실제 상황과 함께 살펴보실 수 있는 다음의 게시물을 추천드립니다: Next.js: prefetch 속성 및 동작 이해
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
확인 감사합니다 !
링크에 마우스를 호버해서 발생된 프리페칭이였네요..ㅎㅎ
확실하게 이해되었습니다 감사합니다 !