prefetch 속성 질문
섹션 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 속성 및 동작 이해
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Next.js 사전렌더링 이해하기 부분
0
18
1
모달 관련 질문
0
30
3
렌더링 관련 질문
0
76
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
59
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
60
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
73
2
npx prisma db push 시 에러가 뜹니다.
0
91
3
vercel 배포를 실패하였습니다.
0
93
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
54
2
getServerSideProps 함수와 SSR의 관계
0
76
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
58
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
112
2
일반적인 nextjs project architecture에 대하여..
0
83
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
71
2
배포 시 오류 발생
0
83
2
백엔드 서버 오류납니다.
0
79
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
102
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
74
2
익스텐션 질문
0
58
1
강의 들으면서 궁금한 부분 질문드립니다.
0
108
1
서버 배포 에러입니다.
1
97
2
[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache
1
102
2