왜 Next.js에선 <Link> 컴포넌트를 쓸까?
Next.js에선 경로 간 탐색을 <a>가 아닌 <Link>를 사용해야 한다. 왜일까?
결론부터 말하자면, 서버 사이드 렌더링의 단점인 화면 전환이 느린 것을 보완하여 성능을 높이기 위함이다.
<Link>는 HTML의 <a> 태그를 확장하여 만든 리액트 컴포넌트로, 경로간 prefetching과 client-side navigation을 제공한다.
여기서 <Link>가 제공한다고 하는 prefetching과 client-side navigation에 대해 알아보자.
브라우저의 뷰포트 안에 Link 컴포넌트가 있다면, 해당 Link로 연결되는 페이지를 백그라운드에서 ‘미리 가져오는’ 기능이다. 이로 인해 Link 컴포넌트를 누르면 SPA처럼 페이지 전환이 빠르게 이루어질 수 있다.
만약 Prefetching 기능이 없다면, Link 컴포넌트를 클릭하는 시점에 페이지를 요청해야하기 때문에 데이터 응답 시간만큼 페이지 전환이 느려질 것이다.
브라우저에 의해 페이지 전환이 이루어지는 것이 아니라, 자바스크립트에 의해 수행되는 것을 말한다.
Client-side Navigation이라고 해서 SPA의 페이지 전환 방식과 동일한 것은 아니다. Next.js에서 페이지 전환이 어떻게 이루어지는지 알아보기 전에 전통적인 방식과 SPA 방식을 살펴보자.
MPA(Multiple Page Application)에 대해서 공부한 경험이 있다면, 단점으로 흔하게 ‘새로운 페이지로 이동할 때 화면이 깜빡거린다.’는 내용을 접한 적이 있을 것이다.
여기서 화면이 깜빡거리는 이유? 새로운 페이지에 대해 요청할 때마다 화면을 처음부터 다시 그리기 때문
새로운 URL로 이동하려고 하면, 브라우저는 서버에게 해당 페이지를 렌더링하기 위해 필요한 HTML, CSS, JS 파일을 요청하고, 브라우저의 화면 렌더링 과정(파싱부터 페인팅)에 따라 화면을 처음부터 다시 그려 우리가 요청한 페이지를 보여주게 되는 것이다.
react-router-dom에는 <Link> 컴포넌트가 있다. 이 컴포넌트는 <a> 태그를 가지고 있지 않다. 오로지 자바스크립트 로직에 의해서만 동작하는 컴포넌트이다.
넥제의 <Link> 컴포넌트는 한마디로 SPA 스타일과 전통적인 방식을 혼합했다고 볼 수 있다. 컴포넌트 내부에 <a> 태그를 내장하고 있지만, 클릭 시 브라우저의 동작을 막고 자바스크립트에 의해 페이지 전환이 수행된다. 이를 통해 서버 사이드 렌더링 방식을 사용함에도 불구하고 부드럽고 빠르게 화면이 전환되는 것이다.
그럼 <Link>는 왜 굳이 a 태그를 사용하여 구현된 것일까?
이에 대해서는 ‘접근성’, ‘브라우저 호환성’, ‘SEO’의 세 가지 측면에서 그 이유를 알 수 있다. (즉, a 태그를 사용하므로써 위의 세 가지 측면에서 이점이 있는 것)
<a>는 시맨틱 태그로 웹 접근성에 유용한 태그로, 링크를 의미론적으로 표현하는 태그다. 웹에 접근이 쉽지 않은 장애인들이 웹을 더 쉽게 탐색하고 이해할 수 있게 해준다.
<a>는 모든 최신 브라우저에서 지원되며 하이퍼링크를 만드는 표준 방법이다. 이로써 여러 브라우저 환경에서 일관된 동작을 보장한다.
검색 엔진 크롤러는 웹 상의 많은 페이지들을 탐색하며 인덱싱할 때 <a> 태그를 따라 하이퍼링크를 탐색한다. 이로 인해 <a> 태그를 사용하는 것이 검색 엔진 최적화에 매우 중요하다.
13버전과 그 이하 버전에서의 사용법의 차이가 있다.
13버전에서는 <Link> 내부에 <a> 태그를 넣지 않아도 된다.(내장되어 있기 때문)