[NextJS] 컴포넌트 안에 <a> 태그 쓰면 단점

NextJS를 이용하여 프로젝트를 진행할 때 , 다른 페이지로의 이동을 위해 anchor 태그를 사용하는 경우를 종종 볼 수 있습니다.

위는 a 태그를 이용하여 페이지 이동을 진행했을 때의 모습입니다. 왼쪽 상단을 자세히 보면 새로고침이 일어나는 모습을 볼 수 있죠 ? 이는 페이지 전환 시 필요한 부분만 렌더링되는 것이 아니라 전체 페이지가 리렌더링 된다는 것을 의미합니다.

결론적으로는 , a 태그를 사용하는 것은 전체 페이지를 렌더링시켜 Single Page Application의 이점을 완전히 잃어버린다는 것을 의미합니다. 그러면 굳이 NextJS나 React를 사용할 필요가 없겠죠 ?

import Link from "next/link"

<Link href="/community">Join the Community</Link>

NextJS에서 지원하는 Link Component를 통해 SPA의 이점을 살린 링크 이동이 가능해집니다. 새로고침이 발생하지 않는 모습을 볼 수 있죠 ?

Link 컴포넌트가 지켜주는 이점은 이 뿐만이 아닙니다.

1. Link 컴포넌트는 컴포넌트에 hover되는 순간 해당 페이지의 데이터를 미리 가져오는 prefetching 기능을 제공하는데 , 이를 통해 사용자 경험을 증진시킬 수 있습니다.

2. 페이지 전환시 필요한 코드만 로드하는 코드 스플리팅을 자동으로 처리하여 , 불필요한 데이터를 로드하지 않습니다.

3. Link 컴포넌트는 NextJS의 렌더링 전략과 잘 통합되어 있기 때문에 페이지 인덱싱에 유리합니다.

결론 : anchor 태그 대신 Link 컴포넌트 쓰자.