💡 NextJS로 개발하면서 <a> 대신에 Link 컴포넌트를 사용하고 있었는데, Link의 세부적인 기능과, <a>와의 차이를 명확히 설명할 수 없었다. 이번 기회에 공식문서를 읽고 NextJS의 Link 컴포넌트를 정리해보았다.

NextJS의 Link

Next.js에서 제공하는 Link 컴포넌트는 클라이언트 측 라우팅을 사용하여 페이지 이동을 수행하는 기능입니다.

사용방법

공식문서에 따르면, pages 디렉토리의 구조가 다음과 같을 때,

pages/index.js
pages/about.js
pages/blog/[slug].js

다음과 같이 사용할 수 있습니다.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}

export default Home

<a> 태그를 사용하지 않는 이유

<a> 태그를 사용하는 것이 웹 개발에서 일반적인 방법입니다. 하지만 Next.js에서 <a> 태그를 사용하게 되면 서버 사이드 렌더링에 대한 문제가 있습니다.

서버 사이드 렌더링에 대한 문제
Next.js는 서버 사이드 렌더링을 지원하는 프레임워크입니다. 서버 사이드 렌더링을 사용하는 경우 일반적인 <a> 태그를 사용하면 클라이언트 측 라우팅이 적용되지 않아서 페이지 이동 시 서버에서 새로고침이 발생합니다. 이는 사용자 경험과 검색 엔진 최적화(SEO)에 부정적인 영향을 미칩니다.

반면 Link 컴포넌트를 사용하면 SPA의 경험을 제공하면서도 검색 엔진 최적화(SEO)에 유리한 이점도 가질 수 있습니다.

Link 컴포넌트를 사용합시다.

실시간 탐색 기능

Link 컴포넌트는 페이지 이동을 위해 페이지를 새로고침하지 않고, 브라우저의 히스토리 스택에 새로운 항목을 추가하여 이전 페이지로 돌아갈 수 있는 실시간 탐색기능을 제공합니다.

예를 들어, Link 컴포넌트를 사용하여 /about 페이지로 이동하는 경우, 브라우저의 히스토리 스택에 새로운 항목이 추가되고, 이전 페이지로 돌아갈 수 있습니다. 이는 사용자가 뒤로 가기 버튼을 사용하여 이전 페이지로 돌아갈 수 있게 해주는 것입니다.

이러한 기능은 UX를 향상시키는데 큰 도움이 됩니다.

검색 엔진 최적화(SEO)

Next.js의 Link 컴포넌트는 검색 엔진 최적화(SEO)에 매우 유리한 기능을 제공합니다.

일반적인 클라이언트 사이드 라우팅은 페이지를 로드하는 동안 JavaScript 코드가 실행되기 때문에 검색 엔진 크롤러가 페이지의 내용을 인식하지 못할 수 있습니다. 이러한 문제를 해결하기 위해 서버 사이드 렌더링(SSR)을 사용하여 페이지가 로드될 때 서버에서 HTML 코드를 미리 생성하여 브라우저에 전송하는 방법을 사용합니다.

Next.js의 Link 컴포넌트는 클라이언트 사이드 라우팅을 사용하면서도 검색 엔진 최적화(SEO)를 위한 장점을 제공합니다. 이 컴포넌트는 페이지 이동에 필요한 JavaScript 코드를 미리 로드하고, 페이지 이동 시 브라우저의 히스토리 스택에 새로운 항목을 추가하여 이전 페이지로 돌아갈 수 있도록 합니다.
이를 통해 검색 엔진 크롤러는 페이지 이동에 필요한 모든 코드를 인식할 수 있으므로 페이지의 콘텐츠를 적절하게 인식할 수 있게 됩니다. 이는 SEO에 매우 유리한 방식입니다.

SEO 관점에서 Router, Link, a 태그 간의 차이점
Router: Router는 URL을 관리하는 역할을 합니다. 일반적으로 클라이언트 측 라우팅에 사용됩니다. 브라우저의 주소창에 URL을 입력하거나 뒤로 가기/앞으로 가기 버튼을 클릭할 때마다 브라우저에서 URL이 변경됩니다. 검색 엔진 크롤러는 이러한 URL을 읽어서 해당 페이지의 콘텐츠를 색인화합니다.
Link: Link는 클라이언트 측 라우팅을 처리하면서 SEO에 유리합니다. 이 컴포넌트는 클릭 이벤트에 응답하여 페이지를 전환합니다. Link 컴포넌트를 사용하면 페이지를 새로고침하지 않고 URL을 변경할 수 있습니다. 이는 검색 엔진 크롤러가 페이지의 콘텐츠를 읽을 수 있게 합니다.
a 태그: <a> 태그는 클라이언트 측 라우팅을 처리하지 않으며, 페이지를 새로고침합니다. 이는 검색 엔진 크롤러가 페이지의 콘텐츠를 읽을 수 없게 합니다. a 태그는 보통 외부 링크를 처리할 때 사용됩니다.

따라서, Link 컴포넌트는 클라이언트 사이드 라우팅을 위한 컴포넌트로, 초기 로딩 속도를 향상시키는 동시에 검색 엔진 최적화(SEO)에도 이점을 제공합니다.

다양한 props 제공

Link 컴포넌트는 다양한 속성(props)을 제공하여 페이지 이동을 세밀하게 제어할 수 있습니다.

예를 들어, as 속성을 사용하여 브라우저의 URL 경로를 변경할 수 있고, replace 속성을 사용하여 새로운 페이지로 이동할 때 기존 페이지를 대체할 수 있습니다. 또한, prefetch 속성을 사용하여 미리 페이지를 불러와 캐시해 두는 것도 가능합니다.

이외에도 Link 컴포넌트는 다음과 같은 속성(props)을 가집니다.

href: 이동하고자 하는 페이지의 URL을 지정합니다.
as: 브라우저에서 URL의 경로를 변경할 때 사용되는 가상 경로(virtual path)를 지정합니다.
replace: 이동할 때 페이지를 새로고침하지 않고 기존의 페이지를 대체하는 옵션입니다.
scroll: 새로운 페이지로 이동할 때 스크롤 위치를 조절하는 옵션입니다.
shallow: 브라우저의 히스토리 스택에서 새로운 항목을 생성하지 않고 이전 페이지로 돌아가는 옵션입니다.
passHref: a 태그에 href 속성을 추가할 지 여부를 결정하는 옵션입니다.
prefetch: 미리 페이지를 불러와 캐시해 두는 옵션입니다.

불필요한 <a> 태그

Link 컴포넌트를 사용하면 개발자가 별도로 a 태그를 작성하지 않아도 됩니다. 왜냐하면 Link 컴포넌트는 내부적으로 알맞은 a 태그를 생성하기 때문입니다. 이를 통해 개발자는 페이지 이동을 구현할 때 불필요한 코드 작성을 줄일 수 있습니다.

또한, Link 컴포넌트는 웹 접근성에 대한 최신 규칙을 준수합니다.

웹 접근성(Web Accessibility)은 모든 사람이 인터넷이나 모바일 디바이스 등의 디지털 기기를 통해 제공되는 웹 콘텐츠와 기능에 동등하게 접근할 수 있도록 보장하는 것을 의미합니다.

Link 컴포넌트는 이러한 웹 접근성 규칙을 준수하여, 모든 사용자가 쉽게 페이지를 이동할 수 있도록 도와줍니다. 따라서, 개발자는 Link 컴포넌트를 사용하여 웹 접근성을 고려하지 않고 코드를 작성해도 됩니다.

마지막으로

Link 컴포넌트는 Next.js에서 제공하는 핵심 기능 중 하나이므로, Next.js를 사용하는 개발자라면 이를 잘 활용하는 것이 좋습니다. 페이지 이동이 빠르고 부드러운 UX를 제공하면서, 검색 엔진 최적화(SEO)까지 고려할 수 있는 Link 컴포넌트는 Next.js 개발을 위한 필수적인 요소입니다.