라이브러리 - React Router v7 - prefetch

React Router v7

 

 

✅ prefetch

---

사용자가 클릭하기 전에 다음 페이지에 필요한 것들을 미리 받아오는 기능

 

이건 “미리 받아보려는 힌트”에 가깝고, 클릭 시 무조건 즉시 렌더링 보장은 아니다.

 

진짜로 즉시 보여주고 싶으면 loader 쪽에서 캐싱 전략을 따로 가져가야 함. 예를 들면 React Query의 ensureQueryData() 같은 방식으로 loader가 먼저 캐시를 확인하게 만들거나, 서버 응답에 적절한 Cache-Control을 붙이는 방식이 필요

 

none

<Link prefetch="none" />

기본값. 아무것도 미리 받아오지 않는다.

intent

<Link prefetch="intent" />

사용자가 링크에 hover하거나 focus했을 때 미리 받아옴(마우스가 링크를 벗어나면 취소됨)

render

<Link prefetch="render" />

링크가 화면에 렌더링되자마자 미리 받아옴. 빠르지만 링크가 많으면 네트워크 낭비 가능

viewport

<Link prefetch="viewport" />

링크가 사용자의 화면 안에 들어오면 미리 받아옴. 모바일이나 긴 리스트에서 유용