NuxtLink 사용법, 반드시 사용해야하는 이유

<NuxtLink /> 란?

NuxtLink 는 Nuxt 프레임워크에서 Vue의 <RouterLink /> 와 <a> 태그를 대체해서 사용할 수 있는 컴포넌트 입니다.

지능적으로 내부링크인지, 외부링크인지 파악합니다.

Nuxt2 에서는 내부링크만 사용 가능하였지만, Nuxt3 부터 외부링크도 사용이 가능하게 되었습니다.

 

반드시 사용해야 하는 이유

내부링크의 경우에는

prefetching 기능으로 미리 해당 페이지에 대한 정보를 가지고 와서

화면이 이동하게 되면 빠르게 다음 페이지로 넘어갈 수 있도록 합니다.

이러한 기능으로 사용자 경험을 최적화 합니다.

 

현재 화면에 표시되지 않고, 숨어있으면 다음 페이지의 정보를 로드하지 않고, 스크롤로 내려서 화면에 보이는 순간

데이터를 가지고 오는 아주 똑똑한 녀석입니다.

 

반대로 외부링크의 경우에는 a tag rel 속성을 지정합니다.

rel 속성은 현재 문서와 외부 문서간의 relationgship을 명시적으로 나타냅니다.

 

기본적으로 noopener, noreferrer 속성을 적용합니다

noopener 속성은 새창을 열때, 이전 창의 주소를 보내지 않아서 보안 향상에 도움을 줍니다.

noreferrer 속성은 링크를 클릭했을 때,

referrer 헤더 정보를 전송하지 않아서, 어디서 접속했는지 알지 못하게 하여, 개인 정보 향상에 도움을 줍니다.

 

기본 사용법

내부링크

<NuxtLink to="/my">
  My page
</NuxtLink>
<!-- <a href="/my">My page</a> -->

 

외부 링크

<NuxtLink to="https://powerku.tistory.com">
    프론트엔드 연구소로 이동 하기
</NuxtLink>
<!-- <a href="https://powerku.tistory.com" rel="noopener noreferrer">프론트엔드 연구소로 이동 하기</a> -->