a 태그 말고 Link를 권장하는 이유
???: 아니 React에서는 그냥 a 태그만 써도 별 지장이 없었는 데 NextJS에서는 왜 Link 컴포넌트를 강제하는 거임?
React와 NextJS의 차이점을 아는가?
???: 당연하죠! React는 클라이언트-사이드-렌더링이고 NextJS는 서버-사이드-렌더링을 주력으로 하는 프레임워크잖아요!
그렇다 SSR을 구현하기 위해 만들어진 컴포넌트이다.
정적인 페이지를 전환할 때 a 태그는 버벅거리며 페이지를 전환하는 데, Link 컴포넌트를 활용하면 부드럽게 페이지가 전환되는 모습을 확인할 수 있다.
a 태그와 Link 컴포넌트의 다른 점은 Link 컴포넌트에는 prefrech라는 속성이 있다. prefetch라는 녀석을 활성화하면 하이퍼링크를 지정하게 될 경우 그 페이지의 데이터를 미리 가져와서 자연스럽게 페이지를 전환할 수 있도록 도와주는 녀석이다.
기본적으로 null 값으로 지정되어 있어 정적 사이트일 경우에만 미리 데이터를 가져오게 되어 있다. 이 데이터를 true로 지정해 활성화 시키면 정적 사이트 뿐만이 아니라 동적 사이트도 미리 데이터를 가지고 와서 페이지 전환을 자연스럽게 할 수 있다.
다만 이 기능은 원치 않는 데이터를 가지고 오거나 트래픽을 줄이기 위해서는 false로 비활성화 시켜 prefetch 기능을 끌 수 도 있다.
NextJS에는 이 처럼 사용자 경험을 위한 부드러운 페이지 전환 위해 여러 노력을 기울이고 있다.
Link 컴포넌트도 그를 위한 것중 하나이다.
다른 대안도 있는 데 router 객체이다.
window.location 객체 대신 router 객체를 써라
평소에 웹 페이지 개발을 하면서 다들 window.location 사용한 경험이 한 번쯤은 있을 것이다. 하지만 NextJS에서는 router라는 객체를 활용해서 window.location의 기능을 대체하려고 한다.
물론 window.location 의 기능이 더 많지만 실제로 쓰는 데에 별로 필요한 기능이 아닐 수 있다. 우린 이 사이트의 포트 번호 정보와 사이트의 도메인이 필요한 게 아니기 때문이다.
방문자가 어디 국가에서 왔는 지, 어떻게 하면 쿼리 스트링을 좀 더 편하게 가지고 올 수 있을 지 더 알고 싶을 것이다.
router 객체는 이를 돕기 위해 등장했다.
app 라우터에서
아까 전에 언급했던 prefetch 기능도 router 객체에서 활용 가능하다.
router.prefetch(url) 함수를 활용해 페이지 데이터를 미리 불러오고
router.push(url)을 하게 되면 동적인 페이지라 하더라도 페이지가 부드럽게 이동 될 것이다. 물론. prefetch는 페이지 로드 전에 해두는 것이 좋다.
