next/link 와 next/router

Dashboard 페이지에 꾸역꾸역 getServerSideProps를 작성한 후에
MyPage와의 연결을 시도했다.

페이지 이동 정도는 그냥 간단히 해결 될 줄 알았지...

이렇게 다른 팀원이 작성한 MyPage라는 페이지에서 내가 만든 Dashboard로 연결을 해야 했음. 페이지 이동을 어떻게 하는지 찾아보니 Link컴포넌트를 쓰면 된다는 이야기가 있길래 ! 냅다 적용 !

.. 그랬더니 이동은 되는데 기껏 작성해 둔 getServerSideProps가 동작을 안함 ㅜ.ㅜ

그래서 next/router 를 사용했는데, 이 페이지 이동에 뭘 사용해야 내가 원하는대로 할 수 있을지에 대해서는 나의 코치인 챗지피티 선생님께서 말을 너무 번복하는 바람에, 아직도 이게 맞는지 아닌지 너무 헷갈린다.ㅋㅋㅋㅋ

여러가지로 질문을 쪼개서 해보고.. 구글링도 해보고..
결과적으로 의도대로 동작하지만 분명히 다음에도 확신이 없을 것 같아서
이 글은 그 결과를 정리해 둘 목적임.

다음에 더 나은 내가 이어서 고민하는 걸로...

---

• next/link와 next/router는 둘 다 next.js의 내장 모듈임
• client-side rendering 으로 페이지 이동을 하지만 server-side rendering 도 지원함
• 그러니까 next/link를 썼더니 getServerSideProps가 실행되지 않아서 next/router를 썼더니 됐다! 는 것 자체가 뭔가 다른 문제가 있는 듯 😭

next/link

• Link 컴포넌트를 통해 페이지간의 링크를 생성함
• 사용자 인터랙션 기반으로 동작함 (링크를 클릭)

next/router

• useRouter 훅이나 router.push 와 같은 메서드를 사용하여 페이지 이동을 제어
• 프로그래밍 방식으로 라우팅을 제어함
• 사용자 인터랙션으로 트리거될 수도 있지만, 특정 조건이나 로직에 따라 페이지를 동적으로 로드하는 동작도 가능함!

---

어쨌든 의도대로 동작은 하는 완성된 코드

(참고) 페이지를 연결하기 위한 Link-Component그리고 Pre-Fetch