router.push, <Link />, <a /> 차이

Next로 만든 제품 코드리뷰를 하다가 다음과 같은 코드를 보았다.

const handleFunc = () => {
    router.push(`/example/${example.slug}`);
  };

  return (
    <Wrapper>
      <Example onClick={handleFunc}>{example.name}</Example>
      ...
    )

단순 페이지 이동같은데 왜 Link를 안쓰고 router.push 를 쓸까??

 

그런데 Link와 router.push의 차이가 뭐지??? 궁금해졌다.

 

한글자료만 찾아봐도 잘 안나와서 결국 스택오버플로우를 들어갔는데 너무 정갈하게 설명이 나와있었다.

 

진작에 볼껄..

 

router.push

window.location과 비슷하지만 <a /> 태그를 만들지 않음. 

=> 크롤러가 탐색하지 못함

 

SEO에 좋지 못하니 단순 페이지 이동을 위해서라면 사용하지 않는 것이 좋음.

<Link />

<a /> 태그를 만듬. => 크롤러가 탐지할 수 있음

사용자는 페이지를 리로드하지 않고, SPA 경험을 함

 

<a />

스탠다드 하이퍼링크이다.

크롤러에게 탐지가 되고, 페이지를 전체 로드한다.

 

SPA를 고려한다면 모든 웹사이트에서 <Link /> 태그를 사용하고 리다이렉션 시킬 곳에서 router.push 를 사용해야한다.

 

---

 

예외

Under the hood, <Link> only creates <a> tag if you pass a string as the children. Passing all other elements such as <div>, except <a>, will not create <a> tag to wrap your underlying component. Next/Link will just use Next/Router to do imperative routing when such scenario happens, thereby does not give any benefit SEO-wise

문자열을 자식으로 전달하는 <Link />만 <a>태그를 생성한다.

만약 <div>같은 다른 태그를 전달하면(<a>제외) <a>태그를 생성하지 않는다.

이때 Next/Link 는 Next/Router를 사용해서 명령적 라우팅을 수행하므로 SEO 측면에서 어떠한 이점도 제공하지 않는다.