<a /> vs <Link /> vs router.push 차이점 비교

a태그

• 기존 html 페이지의 이동 방식이다.
• a 태그로 이동하게 되면 이동할 페이지를 새로 다운받아서 보여준다.
  따라서, react/next의 SPA를 활용하지 못하게 되어 비효율적이다.

Link 태그

• next에서 제공하는 a 태그와 유사한 태그로, SPA를 활용할 수 있다.

import Link from "next/link";

<Link href={"/26(10)-03-kakao-map-routed"}>페이지 이동하기</Link>

router.push

• react/next에서의 페이지 이동 방식이다.
• 이미 다운되어 있는 화면으로 이동하기 때문에 속도가 비교적 빠르다.

🚨 카카오맵 등의 라이브러리를 화면에 띄우려면 라이브러리를 다운받는 속도가 화면이 전환되는 시간보다 느려서 오류가 발생할 수 있다.

해결 방법

1) 최상단인_app.tsx이나 이전 페이지에서 미리 카카오를 다운로드 받아둔다.

• 모든 페이지에서 다운로드 받게 되므로 비효율적이다.
• 이전 페이지에서 받더라도 라이브러리가 있는 페이지에 접속하지 않는다면 낭비가 발생한다.

2) 라이브러리가 다운되기 전에는 코드를 실행하지 않도록 막는다.

🧐 어떤 방법이 제일 좋을까?

👉🏻 고정된 url로 이동할 때는<Link>를 활용하자~!

Link 태그 안에 a태그를 함께 작성해 시맨틱 태그를 활용할 수 있다.
안에 a태그가 있더라도, 실제 페이지 이동은 Link 태그를 통해 SPA 방식으로 빠르게 이동한다.

<Link href={"/26(10)-03-kakao-map-routed"}>
  <a>페이지 이동하기</a>
</Link>

👉🏻 But, 게시글 등록 후 return값으로 받아오는 id로 다이나믹 라우팅 하는 경우 등,
고정된 url이 아닌 경우는 router.push를 이용한다.

시맨틱 태그

시맨틱 태그를 활용하면 검색 엔진 최적화에 도움이 된다.
(+ 개발자들 간 커뮤니케이션이 용이해진다는 장점도 있음)