[Next.js] a 태그와 Link 컴포넌트

<Link><a>링크 이용해서 페이지 이동</a></Link>

Link 컴포넌트는 Next.js 에서 제공하는 링크 기능을 갖고있음.

개발자 도구>네트워크>자바스크립트 체크 켜놓고 비교해보기

링크 컴포넌트 이용 시(최적화 가능)

• 링크 컴포넌트 이용 시 기존 자바스크립트 유지하고 필요한 파일만 더 불러오는 방식
• 모든 데이터가 새로 불러와지는것이 아닌 추가적으로 필요한 부분만 불러오는 방식
  (Code Splitting): 특정 페이지에 접근할 때 해당 페이지를 그릴 때 필요한 chunk 만 로드, 페이지 이동할 땐 목적지 페이지에 필요한 chunk 만 추가 로드
• 링크 컴포넌트를 이용하면 Client Side Navigate를 이용하며 최적화 가능
• (Prefetching): Viewport에 Link 컴포넌트가 나타나면 미리 가져오는 것

a 태그 이용 시

• 기본적인 웹의 기능으로 주소창에 새로운 주소창을 치고 이동한것과 같은 현상
• HTML이 리로드
• 외부 링크로 연결 할 때 a 태그 사용
• Link 컴포넌트에 스타일을 줄 때는 a 태그에 줘야 함