Next.js - Link와 Router의 다른 점과 getServerSideProps

문제😳

Next.js에서 지원하는 Link를 활용하여 getServerSideProps를 실행하는 페이지로 이동을 했을 때 getServerSideProps에서 API가 정상적으로 호출되지 않는 문제가 발생했다. 분명 Next.js 공식문서에서는 getServersideProps는 next/link와 next/router로 호출한 페이지에서 정상적으로 실행된다고 나와있었다.

 

next/router로 이동한 페이지에서는 getServerSideProps가 정상적으로 동작했고 이동한 페이지에서 새로고침을 해도 정상적으로 API를 호출했지만 next/link로 이동한 페이지에서는 이동했을 때는 최초 페이지를 호출 했을 때는 정상적으로 동작했지만 뒤로가기를 눌러 다시 페이지를 이동했을 때는 API가 제대로 호출되지 않아 오류가 발생하거나, 에러가 발생한 페이지에서 새로고침을 통해 다시 페이지를 호출 해 값을 불러오는 등 아주 불안정하게 동작하는 원인이 있었다.

 

1. 최초 페이지 이동 시 -> 정상 동작

2. 뒤로가기 후 다시 해당 페이지 이동 시 -> 오류

3. 오류 페이지에서 새로고침 시 -> 정상 동작

 

원인🤔

원인은 next/link의 동작 방식이였다. 구글링을 통해서 엄청 시간을 투자해서 검색을 했었지만 나와 비슷한 케이스를 찾지 못했고 딱히 명쾌한 답을 구하지는 못했다. 그래서 결국 최후의 수단으로 ChatGPT를 통해 원인을 알게 되었다.

 

Link Component의 구동 방식

 

ChatGPT의 답변에 정말 간단 명료하게 단번에 이해가 가능했다. Link Component는 미리 Pre-Rendering 페이지를 CSR 방식으로 보여주거나 getStaticProps나 getStaticPath를 사용해 Prefetch가 된 페이지를 "브라우저"에서 페이지를 로드하는 방식이라 SSR 방식의 getServersideProps가 동작하지 않는 문제였다.

 

해결😃

next/router로 getServerSideProps를 실행했을 때 문제가 발생하지 않았던 것은 알았지만 "왜 발생하지 않을까?"라는 명쾌한 이유를 찾이 못했다. 하지만 이것도 ChatGPT를 통해 명쾌한 답변을 구했다.

 

next.js의 link와 router의 차이

결과적으로 Link 컴포넌트는 CSR, Router는 SSR을 할 때 유용하다는 것을 알게 되었다.

Next.js에서는 SEO를 위해 Link Component를 사용하라고 권장하지만 무조건 사용하는 것 보다는 상황에 따라 알맞게 쓰는게 더 중요한 것 같다.