[Nuxt.js] <NuxtLink> 사용하는 이유 !

🚀 NuxtLink를 써야 하는 이유

1️⃣ 클라이언트 사이드 네비게이션 (CSR) 적용

• <a> 태그는 기본적으로 서버에 요청을 보내고 새로고침(F5)하면서 페이지를 이동함.
• 반면 <NuxtLink>는 페이지를 새로고침 없이 Vue Router를 이용하여 이동하기 때문에, 앱처럼 부드럽게 작동함.
• NuxtLink를 쓰면 라우트가 변경될 때 Vue의 가상 DOM을 활용하여 필요한 데이터만 업데이트함.
• ✅ 결과적으로 속도가 빠르고 UX가 좋아짐.

📌 비교 예시

<!-- 일반 a 태그 (페이지 새로고침 발생) --> 
<a href="/about">About 페이지로 이동</a> 
<!-- NuxtLink (SPA 방식, 새로고침 없이 부드러운 이동) --> 
<NuxtLink to="/about">About 페이지로 이동</NuxtLink>

---

2️⃣ 자동 프리페치(Pre-fetch) 기능 지원

• <NuxtLink>를 사용하면, 브라우저가 화면에 보이는 링크를 미리 로드할 수 있음.
• Nuxt 3에서는 기본적으로 prefetch 기능이 활성화되어 있어, 사용자가 클릭하기 전에 이미 데이터를 로드함.
• ✅ 결과적으로 페이지 전환 속도가 더 빨라짐.

---

3️⃣ SEO 최적화 지원 (Nuxt 3에서는 자동 적용)

• <NuxtLink>는 nuxt.config.ts의 router.options 설정을 통해 자동으로 rel="noopener noreferrer" 등의 SEO 관련 속성을 추가할 수 있음.
• 검색 엔진이 링크를 제대로 인식할 수 있도록 도와줌.

---

4️⃣ 동적 라우팅(Dynamic Routing)과 잘 맞음

• Nuxt의 pages 디렉터리를 기반으로 자동 라우팅이 설정되는데, <NuxtLink>를 사용하면 라우트와 잘 연동됨.
• 동적으로 경로를 설정할 때도 더 직관적임.

 

<!-- 동적 라우팅 (예: /product/123) -->
<NuxtLink :to="`/product/${product.id}`">상품 상세 보기</NuxtLink>

---

5️⃣ 외부 링크는 여전히 <a> 태그를 써야 함

• <NuxtLink>는 내부 라우트(/about, /contact 등)에서만 동작함.
• 외부 사이트 이동(https://example.com)은 여전히 <a> 태그를 사용해야 함.

---

✅ 결론: Nuxt 개발에서는 NuxtLink가 기본!

태그페이지 새로고침 여부속도Pre-fetch 지원SEO 최적화

<a>	새로고침 발생	느림	❌ 없음	❌ 없음
<NuxtLink>	새로고침 없음 (SPA)	빠름	✅ 자동 지원	✅ 가능

💡 정리하자면!

• 🚀 Nuxt에서 페이지 이동할 때는 <a> 대신 <NuxtLink>를 써야 성능이 최적화됨!
• 🌐 외부 링크는 <a>를 그대로 사용하면 됨.
• ⚡ NuxtLink는 Pre-fetch 기능 덕분에 클릭하기 전에 미리 로드되어 속도가 빠름.