💻 비드마켓 리팩토링 next/link 적용기

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

next/Router

비드마켓 프로젝트의 모든 페이지에서 아래 사진처럼 next/Router의 useRouter 훅을 사용해서 router 객체에 접근하여 사용하였다.

router.push

router.push(url, as, options)

• 라우터 히스토리 스택에 새로운 url을 쌓아준다.
• url: 라우팅 하려는 url
• as: 브라우저 url 바에 보여지는 path
• options: scroll, locale 등의 옵션 사용 가능

하지만 이번 비드마켓에서는 SEO의 효과를 높이기 위해서 'next/Link'를 사용하여 개선해보려고 한다.

next/Link

passHref 속성

처음에는 그냥 무조건 <Link> 태그로 모든 것을 변경을 하였다. 이렇게 구현하게 되면 href 속성이 없기 때문에 크롤러가 페이지를 색인하는 데 어려움이 있게 된다.

그 후 next/link 공식 문서를 참고한 결과 passHref을 적용하게 되었다. passHref 속성은 자식에게 href속성을 전달해주는 역할을 한다.

그럼 다음과 같이 href 속성이 적용된다.

이것은 잘 작동되는 것처럼 보이지만 a태그가 존재하지 않기 때문에 웹 크롤러에는 링크가 표시되지 않아 SEO에 부정적인 영향을 끼친다고 한다.

따라서 <a>태그를 직접 코드에 넣어 구현하였다.

<Link href={`/products/${id}`} passHref>
  <a>
    <Button ~~ />
  </a>
</Link>

그리고 그 결과, 아래처럼 코드가 보이게 되었다.

prefetch 속성

next/link에는 prefetch 속성이 있는데 백그라운드에서 페이지를 미리 가져올 수 있다.기본으로 true로 설정되어 있어서 따로 설정하지 않아도 적용되어 있는 속성이다.

결국, 브라우저의 viewport에 Link컴포넌트가 나타나게 되면 Link 컴포넌트에 연결된 page들의 코드들을 미리 가져오기 때문에 Link를 클릭하게되면 빠르게 페이지 전환을 할 수 있다.

비드마켓 프로젝트에서의 next/link 문제

next/link에는 prefetch 속성이 있어서 다음 페이지를 로드할 때 router.push 보다 빠르게 출력될 것이라고 생각했다. 하지만 실제로는 차이가 거의 없었고 그 이유를 찾아보았다.

위의 gif에서 처럼 메인 페이지의 카드를 클릭했을 때 상세 페이지의 정보를 SSR로 즉, getServerSideProps로 얻어오는 방식으로 구현하였다.

이 작업은 페이지에 들어갔을 때 서버에서 데이터를 요청하기 때문에 상세 페이지는 처음에 미리 데이터가 없는 상태로 미리 prefetch할 수 없는 것이다.

즉, next/link로 결국 다음 페이지를 로드하더라도 페이지를 이동했을 때 서버에서 데이터를 받아오기 때문에 결국엔 느린 속도로 데이터를 받아올 수 밖에 없는 것이다.

앞으로의 고민

상세 페이지로 접근하는 속도를 조금 더 빠르게 하고 싶은데 그러려면 CSR로 데이터를 제외한 틀을 미리 만들어 놓고 데이터만 요청하면 사용자 입장에서는 더 빠르게 느껴질 수도 있겠다는 생각이 들었다.

그렇지만 우리는 상세 페이지에 SEO로 서버에서 받아오는 데이터의 상품 이미지를 넣어놨기 때문에 서버에서 API를 결국 호출 해야만 한다.ㅠㅠ

이 두가지 경우 중 하나를 포기해야만 하는 것인지, 둘 다 포기하지 않아도 괜찮을지 조금 더 데이터를 찾아봐야겠다.😭

🔥 느낀점

next의 기능을 도입한다고 해서 무조건 성능이 좋아진다는 것이 아님을 깨달았다. 결국 nextjs의 동작 과정을 제대로 알지 못한 채로 이런 기능이 있어서 도입해야지! 라는 생각은 매우 위험한 것임을 알았다.ㅠㅠ 앞으로는 왜 동작하고 꼭 필요한 기능인지 정확히 알고 사용해야겠다.

리팩토링을 하면서 그래도 성능 개선이 진행되고 있어서 매우 좋다!!
앞으로도 화이팅!>_<

Refer

• next/link 공식문서
• Using Next.js Link Component with Material UI Buttons and Menu Items