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

좋은 질문감사합니다. Next.js를 그냥 “쓰는 단계”를 넘어서
실제로 비용을 의식하기 시작하신것 같아서요.

결론부터 말하면,
Link는 웬만하면 쓰는 게 맞지만, prefetch까지 무조건 켜는 건 아닙니다.

Link의 핵심 가치는 클라이언트 네비게이션이에요.
페이지를 새로고침하지 않고 자연스럽게 이동하게 만드는 것.
그래서 “페이지 이동”이라면 <a>보다 <Link>가 기본값에 가깝습니다.

다만 prefetch는 조금 다릅니다.
App Router 기준으로는 단순한 HTML이 아니라
그 페이지에서 필요한 서버 컴포넌트 결과와 fetch까지 함께 미리 가져옵니다.

그래서
랜딩 페이지에서 데이터가 많은 내부 페이지를 무심코 prefetch 하면,
아직 클릭할지도 모르는 페이지를 위해
서버와 네트워크가 먼저 일을 하게 되는 구조가 됩니다.
이 경우엔 말씀주신것처럼 분명히 독이 될 수 있어요.

그래서 저는 아래처럼 추천드려요.

• 이동 자체가 목적이면 → Link 사용

• 클릭 확률이 높고 가벼운 페이지면 → prefetch 유지

• 랜딩 → 무거운 페이지면 → prefetch={false}

<Link href="/dashboard" prefetch={false}>
  시작하기
</Link>

이렇게 쓰면
네비게이션은 부드럽게 가져가면서,
데이터 비용은 사용자가 선택한 이후에만 지불하게 되어서요.

한 줄로 요약하면,

Link는 기본값이고, prefetch는 "필요에 따라" 입니다.

이걸 질문으로 던졌다는 것 자체가
이미 Next.js를 “어떻게 쓰느냐”보다
“언제 비용을 쓰느냐”로 보고 있다는 뜻이라, 좋은 질문인 것 같아요 :)

안녕하세요, 인프런 AI 인턴입니다. dev_junior님.

Next.js의 Link 컴포넌트에서 제공하는 prefetch 기능은 성능 최적화에 도움이 되지만, 항상 이 기능을 사용하는 것이 최적의 선택은 아닐 수 있습니다. prefetch 기능은 사용자가 방문할 가능성이 높은 페이지의 데이터를 사전에 가져와 사용자 경험을 매끄럽게 하는 데 기여할 수 있지만, 다음과 같은 상황에서는 주의가 필요합니다.

prefetch 사용 시 주의할 점

1. 데이터 크기와 네트워크 상태:

   • prefetch 기능으로 인해 대량의 데이터를 사전에 로드하면 사용자 네트워크 대역폭을 초과하거나 과도한 메모리 사용을 유발할 수 있습니다. 특히, 모바일 네트워크나 제한된 데이터 플랜에서는 사용자의 데이터를 불필요하게 소비할 수 있습니다.
     

2. 필요하지 않은 경우:

   • 사용자가 페이지를 방문하지 않을 가능성이 높은 경우 해당 데이터 사전 로드는 불필요한 리소스 소비로 이어질 수 있습니다. 사용자 경험을 크게 개선하지 않는다면, prefetch를 비활성화하여 클라이언트 측 리소스를 절약하는 것이 더 나을 수 있습니다.
     

3. 사용자 경험:

   • 필수적이지 않은 데이터를 미리 로드하는 경우, 필요한 순간에 속도 저하를 초래하는 데 원인이 될 수 있습니다. 즉, 사용자 경험을 저하시킬 수 있는 잠재적 요소가 될 수 있습니다.
     

4. 리소스의 우선순위:

   • 사전 로드가 필수적인 리소스보다 낮은 우선순위를 가지도록 조정해야 합니다. 예를 들어, 현재 방문 중인 페이지의 콘텐츠보다 미리 로드하는 것이 앞서면 사용자가 현재 페이지를 보는 데 지연을 초래할 수 있습니다.
     

만약 더 구체적인 예제를 참고하고 싶으시다면, 지식공유자님의 Next.js 사전로딩 전략에 대한 내용 게시물을 확인해 보시기 바랍니다. 이 게시물은 prefetch 및 그에 따른 성능 고려 사항에 대한 심화적인 내용을 다루고 있습니다.

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