Next.JS Link Component

• 10/12/2025
• One-minute read

Next.JS의 링크 컴포넌트란?

• 내부 라우팅을 클라이언트 사이드로 처리

• prefetch 옵션은 true, false, default (null, auto ) 가 있다.

  • default: 정적 라우트면 data 포함 다 prefetch, 동적 라우트면 가장 가까운 loading.js만 prefetch
  • true: 동적, 정적 상관없이 내부 데이터까지 다 prefetch
  • false: 동적, 정적 상관없이 다 prefetch하지 않음.

• prefetch 옵션을 통해 데이터를 미리 받아옴으로써 navigation이 더 빠르게 이뤄지게 할 수 잇다.

• prefetch 옵션이 auto인 상태

• 총 5개의 링크 컴포넌트가 걸려있는데, 이에 따라 해당 페이지에 맞는 rsc_payload가 미리 로드됨을 확인할 수 있다.

  • 동적 라우팅 페이지는 없었기 때문에 다 prefetch

• 로드 시간은 평균적으로 16ms로 길지는 않았다.

![[anatole/exampleSite/public/post/Pasted image 20251210134401.png]]

주의할 점

• prefetch 옵션이 true 로 설정되면 정적, 동적 라우트와 무관하게 전부 다 prefetch하게되는 문제가 있따.
  • 예를 들어 현재 우리 서비스에는 유저 리스트로 100명이 넘는 유저를 조회할 수 있는 페이지가 있다.
  • 두 가지 조건을 가정해볼 수 있는데
    • 유저 개인 조회 시 Server-Side에서 데이터 페칭
    • 유저 개인마다 Link 컴포넌트로 연결 (prefetch 옵션 true)
  • 이럴 경우 유저 리스트에서 viewPort에 들어오는 유저마다 prefetch 하게되어 서버 부하도 커질 뿐만 아니라 페이지도 지속적인 data fetching으로 인해 느려질 가능성이 크다.
  • 래딧, stackOverflow에서 이런 사례들을 본 적이 있다.
• 따라서 저런 옵션들도 꼼꼼하게 보는 습관을 기르자