Next.js 까보기 강의 수강생에게 받은 질문이 꽤 중요한 포인트를 짚고 있었습니다. “Link 컴포넌트는 기본으로 prefetch 되잖아요. 이렇게 항상 prefetch 하는 게 맞는건가

Next.js 까보기 강의 수강생에게 받은 질문이 꽤 중요한 포인트를 짚고 있었습니다. “Link 컴포넌트는 기본으로 prefetch 되잖아요. 이렇게 항상 prefetch 하는 게 맞는건가요?” 이질문은 Next.js를 “문법으로 쓰는 단계”를 넘어서 비용과 구조를 생각한 질문 이었어요. 다들 아시는 것처럼 Link를 쓰면 prefetch가 기본으로 됩니다. 이건 Next.js가 의도적으로 만든 UX 개선 포인트예요. 페이지 이동 전에 필요한 리소스를 미리 가져와서 클릭했을 때 “빠르다”는 느낌을 주는 것. 이건 분명한 장점입니다. 그래서 페이지 이동이라면 보다 가 기본값에 가깝습니다. 그런데, 항상 좋은 건 아닙니다. App Router 기준으로 prefetch는 단순히 HTML 만 가져오는 게 아닙니다. 그 페이지에서 필요한 서버 컴포넌트 결과 연관된 fetch까지 함께 미리 실행됩니다. 즉, 아직 클릭할지도 모르는 페이지를 위해 서버와 네트워크가 먼저 일을 시작하는 구조여서요. 랜딩 페이지에서 데이터가 많은 내부 페이지를 무심코 prefetch 하면 이건 UX 개선이 아니라 비용 선지출이 됩니다. 이 경우엔 분명히 독이 될 수도 있어요. 그래서 저는 아래처럼 사용을 추천드려요 이동 자체가 목적이면 → Link 사용(대부분의 경우) 이때, - 클릭 확률 높고 가벼운 페이지면 → prefetch 유지 - 클릭 확율 낮고 무거운 페이지면 → prefetch={false} 시작하기 이렇게 쓰면 네비게이션은 여전히 부드럽고, 데이터 비용은 사용자가 클릭한 이후에만 지불하게 됩니다. 한 줄 요약하면 Link는 기본값이고, prefetch는 필요에 따라 사용하자. 입니다 이걸 “언제 써야 하나요?”로 질문 했다는 게 중요합니다. 이미 이 질문은 Next.js를 기능이 아니라 비용과 구조의 관점에서 보고 있다는 뜻이어서요. Product Engineer 의 관점이기도 하지요. 혹시 여러분은 지금 쓰고 있는 prefetch들이 정말 사용자를 위한 선행 로딩인지, 아니면 그냥 기본값이라 두고 있는 건지 한 번쯤 점검해보신 적 있나요? (아래 링크에서 nextjs 강의 소장하실 수 있어요 https://www.productengineer.info/course/3a92c676-e4eb-484f-bd33-bcb2bd2707e7 30% 할인코드도 드려요 🤗 할인 코드: pec )