Next.js에서의 <Link />와 <a /> 차이

Next로 개발하다보면 <Link /> 를 자주 사용하게 되는데, <a /> 와의 차이점은 무엇일까?

🤔

를 공식문서에 검색해보면 다음과 같다.

<Link /> 는 <a /> 를 확장한 개념으로, prefetchig 과 routes 간의 client-side navigation을 지원합니다. 또한 Next.js에서 라우팅처리하는 가장 기본적인 방법입니다.

<Link />는 웹 사이트가 크롤링하여 SEO 에 유리하고, 페이지를 다시 로드하지 않아 SPA동작처럼 보이게 만들어줍니다. 그러나 <a /> 는 순수 HTML 요소로 새 페이지로 URL을 이동시켜 페이지가 완전히 새로고침 됩니다.

즉, Next.js로 개발할 때는 <Link /> 를 사용하는게 좋습니다.

prefetching 🤔

들어갈 가능성이 있는 페이지를 미리 가져오고, 이 경우 바로 랜더링해서 보여줄 수 있기 때문에 빠른 Routing 전환이 가능하다.

즉, 결론은 Next로 개발시에는 prefetching을 지원하는 <Link /> 로 개발하는 것이 훨씬 좋습니다🎉