Next.js 프레임워크에서는 Link Component 기능을 제공한다.
기존 javascript, react에서는 a태그를 사용하여 페이지를 이동하였으나, Next.js에서는 Link태그를 사용할 수 있다.
<a href="/"></a>
<Link href="/"><a></a></Link>
이 두가지 페이지 전환 방법엔 큰 차이가 있다.
a 태그와 Link 컴포넌트의 차이
a태그는 브라우저에 url을 새로 입력한 것과 똑같아서 문서자체를 처음부터 다시 렌더링한다.
그러나 Link 컴포넌트는 페이지 안에서 새로운 내용만 추가적으로 가져오므로 페이지가 리로드 되지 않는다.
성능 최적화에 큰 차이가 있으므로 적절하게 사용하는 것이 좋다.
본 서비스의 외부 링크로 연결 시 a태그를 사용하고, 서비스 내 이동시에는 Link 컴포넌트를 사용하는게 좋다!
참고로 Link 컴포넌트에 스타일을 입힐때는 a 태그에 적용해야한다.
Code Splitting
Code Splitting은 Link 컴포넌트 사용 시 얻는 또 다른 장점이다.
Next.js는 automatic code splitting을 제공한다.
특정 페이지 접근시에 해당페이지에 필요한 chunk만을 로드한다.
페이지 이동 시 목적지 페이지에 필요한 chunk만 추가로 로드되어 성능 최적화에 도움이 된다.
Prefetching
Prefetching또한 Link 컴포넌트 사용 시 얻는 이점이다.
Link 컴포넌트 이용시 viewport에 노출된 Link의 href와 연결된 페이지의 chunk를 로드해둔다.
현재 보고있는 viewport에 Link 컴포넌트로 작성한 내용이 보일 경우 연결된 페이지 chunk를 로드한다.
그러나 같은 페이지더라도 현재의 viewport에 Link 컴포넌트 내용이 보이지 않다면 chunk를 미리 로드하지 않는다.
이러한 Prefetching을 통해 성능 최적화에 도움이 된다.