[Nuxt3] Nuxt가 제공하는 페이지 이동 컴포넌트 <NuxtLink>

NuxtLink 개요

---

<NuxtLink>는 Vue Router의 <RouterLink>와 html의 <a> 태그를 모두 대체하는 Nuxt3의 내장 컴포넌트이다.

내부 링크와 외부 링크를 자동으로 구분하고, 최적화를 사용하여 링크를 렌더링 한다.

• NuxtLink는 내부 링크인지 외부 링크인지 자동으로 감지하고 적절한 방식으로 처리합니다.
• 내부 링크 (/main 같은 경로)는 Vue Router를 사용해 클라이언트 사이드 내비게이션을 수행합니다.
• 외부 링크 (https://example.com)는 일반적인 <a> 태그로 렌더링 됩니다.

---

내부 라우팅

이렇게 내부 경로의 /main으로 설정되어 있는 경우, 내부의 다른 페이지에 연결한다.

<template>
  <NuxtLink to="/main">
    Main Page
  </NuxtLink>
</template>

---

외부 라우팅

이렇게 외부 경로 url이 설정되어있는 경우, 외부 웹사이트에 연결한다.

<template>
  <NuxtLink to="https://nuxtjs.org">
    Nuxt Docs
  </NuxtLink>
</template>

---

Link 버튼 예제

버튼 클릭 시 NuxtLink의 navigate 함수를 호출하도록 한다.

<NuxtLink v-slot="{ navigate }" custom to="/main">
	<q-btn stretch flat label="Main" no-caps @click="navigate()" />
</NuxtLink>

 

---

NuxtLink 사용 시의 이점

---

 <NuxtLink>가 제공하는 최적화 정리

1️⃣ 내부/외부 링크 자동 구분

• 내부 링크 → Vue Router를 사용한 클라이언트 사이드 내비게이션
• 외부 링크 → 일반 <a> 태그로 렌더링

2️⃣ 프리페칭(미리 로딩)

• 화면에 나타나기 전에 링크된 페이지를 미리 가져와 로딩 속도를 향상한다.
• 기본적으로 활성화하고, 필요하면 :prefetch="false"로 비활성화할 수 있다.

<NuxtLink to="/main" :prefetch="false">메인 페이지</NuxtLink>

 

3️⃣ 최적화된 렌더링

• 사용자가 방문할 가능성이 높은 링크를 효율적으로 처리하여 성능을 개선한다.
• 사용자가 마우스를 올리거나, 특정 페이지에서 자주 방문하는 경로를 분석하여 적절히 프리페칭한다.

4️⃣ 자동 rel="noopener noreferrer" 적용

• 보안 및 성능을 고려하여 target="_blank"인 경우 rel 옵션을 자동으로 추가한다.

5️⃣ 클라이언트 내비게이션 최적화

• 페이지 전체 새로고침 없이 빠르게 전환하여 UX 개선

---

Prefetching 

NuxtLink가 제공하는 기능 중 사용자 경험을 향상시키는 데에 가장 중요한 프리페칭에 대해서 알아보자.

 

Prefetching은 사용자가 페이지를 방문하기 전에 필요한 리소스를 미리 로드하여 로딩 속도를 최적화하는 기술이다.

이를 통해 페이지 전환이 훨씬 빠르게 이루어지며, 사용자 경험(UX)이 향상된다.

<NuxtLink to="/main">메인 페이지</NuxtLink>

위와 같이 NuxtLink를 통해 내부 페이지로 이동하는 링크가 있다.

사용자가 이 링크를 클릭하기 전에 Nuxt가 관련 리소스를 미리 가져오고, 페이지 전환 시 즉시 로딩되기 때문에 사용자 경험이 향상된다.

 

• <NuxtLink>를 사용한 경우: 사용자가 클릭 이벤트를 발생시키기 전에 미리 리소스를 가져와서 로드해 둔다.
• <NuxtLink>를 사용하지 않은 경우: 사용자가 클릭 이벤트를 발생시켜 페이지 이동 시에 리소스를 가져온다.

---

Prefetching options

no-prefetching

프리페칭을 원하지 않는 경우

<NuxtLink no-prefetch to="/main">메인 페이지</NuxtLink>

 

:prefetch="false"

프리페칭을 원하지 않는 경우 2

<NuxtLink :prefetch="false" to="/main">메인 페이지</NuxtLink>

 

prefetched-class

프리페칭이 되었을 때, 특정 클래스를 추가하고 싶은 경우

<NuxtLink prefetched-class="some-css"to="/main">메인 페이지</NuxtLink>