router.push vs Link vs a 태그

 

넥스트로 라우팅하다보니 문득 router.push와 Link 태그 그리고 a태그가 뭔 차이가 있고

무슨 어디에 써야하는지 몰라서 검색해봤다.

 

https://stackoverflow.com/questions/65086108/next-js-link-vs-router-push-vs-a-tag

Next.JS "Link" vs "router.push()" vs "a" tag

스택플로우 Best Answer을 한번 읽어보자 

 

Answer 1

 

router.push()

router.push('/push') behaves similarly to window.location. It does not create a <a> tag, which means - if you are concern with SEO, your links will not be detected by crawlers.

router.push() 는 window.location과 같이 비슷하게 동작을 하지만, a 태그를 생성하지 않을 뿐더러 사용자가 SEO를 고려한다면 링크가 크롤러에 감지되지 않을 것이고,  

<Link>

However, <Link> will create a <a> tag, which means your links will be detected when crawlers scrape your site. End-User will still navigate without reloading the page, creating the behavior of a Single Page App.

Link태그 같은 경우는 a태그를 생성하고, 이는 크롤러를 통해 사용자의 링크가 감지될 것이고, 엔드유저는
 SPA의 동작을 하는 것 처럼 페이지에 대한 리로딩없이 이동될 것이다.

<a>

<a> tag without using next/link's <Link> creates a standard hyperlink which directs end user to the url as a new page. (standard behavior). You should be using <Link> throughout all your website

next/links의 링크태그 없이 a태그 사용은 사용자에게 그 url를 직접적으로 새 페이지로 보내는 기본적인 하이퍼태그를 만들어냅니다. 질문자분은 전체적인 당신의 웹사이트은 Link를 사용하게 될 것이다.

 

---

Answer 2

 

1.  router.push() is mostly used in an event handler (onClick here). This is an action. So let's say you click on the button, then you do some task, and based on the result you take the user to another page. Then you'd want to use router.push(). Don't use it just to go to another page. Note that this is bad for SEO if you want it to be crawled.

 router.push는 보통 eventHanlder와 함께 맞이 쓰이는데, 이건 액션이다. 만약 버튼을 누른다고 가정을 하자 그러면 당신은 task 코드가 실행 될 것이고,  그에 따른 결과에 따라 페이지를 이동하는데 이럴때는 router.push()를 사용할 수 있겠다.  단지 다른 페이지를 가기위해서 사용하지말자. SEO에 좋지 않다. 

 

2.  <Link> does some heavy lifting for you and has a bunch of props that you can pass to customize it. This is what you need most of the time to go to another page. When you are using it, the default browser's behavior to reload the whole page(as you'd see with the <a> tag) is overridden. Crawlers see it as a link to another page, so it's good for SEO.

Link태그는 사용자를 위해 보다 많은일을 하는데 많은 props를 넘길 수 있게끔 커스텀이 가능하고 , 보통 다른 페이지로 이동할때 제일 많이 사용하게 될 것입니다. Link 태그를 사용할때, 기본 브라우저는 페이지 전체를 reload 하려는 행위을 막아준다.  크롤러는 다른 페이지를 가기위한 a 링크로 볼 것이고, SEO에 좋다. 

 

3. <a> tag is just a plain HTML element, with all the default behaviors. When you use it, a full reload happens. If you are using it, try switching to <Link>. Similar to <Link> it's good for SEO.

a 태그는 그 저 쌩 기본 행위가 따라오는 HTML 요소다. a 태그를 사용하게 되면 이는 full-reload를 하게되는데, 만약 쓴다면 Link 태그로 바꾸고, Link와 비슷하니 당연히 SEO에 좋다. 

 

---

 

 

결론 

 

본인 현재하고 있는 IncourseRun Project에서는 NextJS을 기반으로 프로젝트 진행중인데, Task를 진행 후에 페이지간 이동이 잦아서 router.push()를 많이 사용해 왔는데, 햄버거 탭같은 경우에서는 Link를 안 사용했던게 생각이 났다.

 

전 

<Text fontSize={'20px'}>카테고리</Text>
  <Text cursor="pointer" onClick={() => router.push(ROUTES.MAIN)}>
  	홈
  </Text>
  <Text cursor="pointer" onClick={() => router.push(ROUTES.PRODUCT)}>
  	상품보기
  </Text>
  <Text cursor="pointer" onClick={() => router.push(ROUTES.MYPAGE.MAIN)}>
  	마이페이지
  </Text>
</TexT>

후 

<Text fontSize={'20px'}>카테고리</Text>
  <Link href="/">
 	<a>홈</a>
  </Link>
  <Link href="/product">
 	<a>상품보기</a>
  </Link>
  <Link href="/mypage">
 	<a>마이페이지</a>
  </Link>
</Text>