Nuxt - NuxtLink 컴포넌트

h.Im·2024년 9월 23일

Nuxt 기초

목록 보기

12/19

NuxtLink 컴포넌트는 Vue Router의 RouterLink 컴포넌트와 HTML의 a 태그를 대체합니다. 링크가 내부 링크인지 외부 링크인지 지능적으로 결정하고 그에 따라 사용 가능한 최적화(프리페칭, 기본 속성 등)를 사용하여 링크를 렌더링합니다.

RouterLink를 이용한 링크 이동

위와 같이 RouterLink를 이용하면, 내부 링크로의 이동은 정상적으로 이루어지지만 외부 링크인 youtube로의 이동은 정상적으로 이루어지지 않습니다. RouterLink로는 외부 링크 이동이 불가하기 때문에, a 태그를 대체로 사용해야 합니다. 혹은 아래와 같이 custom 속성을 이용해야 합니다.

<template>
  <RouterLink :to="{ path: 'https://www.example.com' }" custom>
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
      Visit Example
    </a>
  </RouterLink>
</template>

NuxtLink를 이용한 링크 이동

아래와 같이 NuxtLink를 추가해서 테스트 해보면 외부 링크로의 이동이 정상적으로 이루어집니다. 왜 그럴까요? 우선 실제로 랜더링된 모습은 어떤지 살펴 보겠습니다.

RouterLink로 작성한 외부 url은 앞에 /가 붙어서 내부 url로의 이동처럼 처리되기 때문에 정상이 아니었습니다. 대신, NuxtLink로 작성한 경우 a 태그의 href가 정상입니다.

NuxtLink의 보안성

NuxtLink를 이용해 외부 링크로 이동하는 컴포넌트를 만들면, 랜더링 되었을 때 rel="noopener noreferrer" 속성이 자동으로 붙는데, 왜 붙는 것이고 어떤 역할을 하는지 알아보겠습니다.

rel="noopener noreferrer"의 역할

noopener

성능 및 보안 개선의 역할입니다.
noopener는 새 탭에서 열리는 페이지가 원래 페이지와 상호작용하지 못하도록 방지합니다. 새로 열린 탭에서 원래 페이지에 접근하는 것은 window.opener 객체를 통해 가능합니다. 즉, 새 탭이 window.opener를 사용해 원래 페이지에 접근하고, 원래 페이지를 제어할 수 있는 보안 이슈가 발생할 수 있습니다.

noreferrer

참조 정보 전달 방지의 역할입니다.
noreferrer는 새로 열린 페이지에 원래 페이지의 URL 정보를 전달하지 않도록 하는 역할을 합니다.
기본적으로 새 탭이 열릴 때, 새로 열린 페이지는 참조(referrer) 헤더를 통해 원래 페이지의 URL 정보를 받을 수 있습니다. 하지만 이 정보가 외부에 노출되면 프라이버시 이슈가 발생할 수 있습니다.
noreferrer 속성은 이러한 참조 정보를 외부 사이트로 전달하지 않음으로써 프라이버시를 보호합니다.

위의 보안적 이슈를 NuxtLink가 알아서 신경써 주는 것입니다!

NuxtLink의 prefetch 기능

NuxtLink의 prefetching(프리페칭)은 Nuxt.js가 제공하는 기능으로, 페이지 전환을 더 빠르게 하기 위해 백그라운드에서 페이지 관련 데이터를 미리 불러오는 것을 의미합니다. 이 기능을 통해 사용자가 실제로 링크를 클릭하기 전에 해당 페이지에 필요한 자원을 미리 로드해 두어, 페이지 전환 속도를 개선할 수 있습니다.

프리패칭 비활성화

<template>
  <NuxtLink to="/about" :prefetch="false">Go to About Page</NuxtLink>
</template>

프리패칭을 비활성화 하고 싶은 경우 위와 같이 속성을 지정하면 됩니다.

프리패칭 시점

기본적으로 Nuxt.js에서는 뷰포트 내에 들어온 링크에 대해 프리페칭을 수행하지만, 마우스 호버에 따라 프리페칭이 이루어지게 할 수도 있습니다.

프리패칭할 NuxtLink가 너무 많을 수 있기 때문에, 뷰포트 내에 들어온 경우만 우선 프리패칭되는 것입니다.

마우스 오버로 프리페칭 트리거 예시

<template>
  <div>
    <NuxtLink 
      to="/about" 
      @mouseover="prefetchRoute('/about')">
      Hover to prefetch About Page
    </NuxtLink>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 마우스 오버 시 해당 경로를 프리페칭하는 함수
const prefetchRoute = (path) => {
  router.resolve(path).matched[0].components.default().catch((e) => {
    console.error('Error prefetching route:', e)
  })
}
</script>