Next.js 에서 Next/link와 a 차이

a태그

• 페이지 전체로드함,spa그런거 없음
• 서비스 외부 링크로 연결할 때 사용

Link태그

• 서비스 내부 링크로 연결할 때 사용하여 SPA를 적용할 수 있음
• 최적화

SPA가 적용된다.

개발자 도구에서 임시로 body 태그에 background:red를 넣고

Link태그로 이동, a 태그로 이동을 각각 해보면

 

• Link태그로 이동했을때 : background가 바뀌지 않는다. SPA로 이동하기 때문이다.
• a태그로 이동했을때 : 페이지가 리렌더링되므로 background:red가 사라진다.

 

개발자도구에서 background를 일시적으로 바꾸고 Link태그와 a태그로 이동해보기

 

최적화

Link태그가 가져다 주는 최적화를 설명하려면 Next.js에서 기본적으로 제공하는 최적화를 설명해야 한다.

Automatic Code Spliting

Next.js는 Automatic Code Splitting을 제공하는데

• 특정 페이지에 접근할 때 해당 페이지를 그릴때 필요한 chunk만 로드하고
• 페이지 이동시 목적지 페이지에 필요한 chunk만 추가 로드 한다.

Link 태그를 이용하면, 뷰포트에 Link컴포넌트가 노출되었을때, href에 연결된 페이지의 chunk를 로드하여 성능을 최적화 한다.

현재 뷰포트에는 첫번째 게시글로 이동하는 Link 태그가 있고(분홍색 color), 스크롤을 내리면 두번째 게시글로 이동하는 Link태그가 있다.

 

스크롤을 내렸을때 두번째 게시들로 이동하는 Link태그가 있음

 

첫번째 게시글로 이동하는 Link태그만 뷰포트에 있을때는 first-post로 이동하는 chunk만 로드된다.

first-post로 이동하는 chunk만 로드, 뷰포트에 첫게시글로 이동하는 Link태그만 있기 때문

스크롤을 내려서 뷰포트에 두번째 Link 태그가 보이게 되면 second-post로 이동하는 chunk를 추가 로드한다.

second-post로 이동하는 chunk를 추가 로드, 뷰포트에 두번째 게시글로 이동하는 Link 태그가 나타났기 때문

 

CSS

추가적으로 Link태그에는 css가 먹지 않으므로 css를 먹이려면 a태그를 추가해주면 된다.

next 12버전때 이야기

+ Next 13이후 변경된내용

Next 13부터는 <Link> 태그에 <a>태그가 포함된다.

 

때문에 <Link />태그에 스타일을 먹이거나 class를 넣어주면 된다.

/*  globals.css에 이렇게 먹이거나  */

a {
  color: #0070f3;

  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* component.module.css에 이렇게 먹이거나  (scss도 동일)*/

.link {
  color: aqua;
}

 

만약 <Link>의 children으로 <a>를 넣어야 할 일이 생기면, <Link>의 props에 LagacyBehavior을 넣어주어야 한다.(공식문서)

 <Link href="/about" legacyBehavior>
      <a>About Us</a>
</Link>

---

Next.js Link 공식문서