NEXT getServerSideprops 오류

강의를 듣다 Next의 기능 중 GetServerSideProps를 사용하다 아무런 에러 없이 동작을 안 해서 왜 그런지 파헤쳐보았다.

일단 getServerSideprops의 동작 방식은

서버 사이드 렌더링(SSR) 방식이다. 즉, 서버 측에서만 실행되고 브라우저에서는 실행되지 않는다.
외부 데이터를 서버에서 받아와 초기 데이터로 설정하고 페이지로 전달한다.
페이지 요청 시마다 실행된다.
동적으로 데이터를 가져와 업데이트가 가능하다는 장점이 있다. (Dynamic Rendering)
가져온 데이터를 props에 담고 return하여 컴포넌트에 전달한다.

요청 시 데이터를 가져와야 하는 페이지를 미리 렌더링해야 하는 경우에만 사용한다고 한다

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props

 

 

해당코드를 클라이언트 컴포넌트에 작성해 놓으면 딱히 실행구문 없이

서버 사이드 렌더링 방식으로 페이지 요쳥시마다 실행되는 것 같다.

해당 코드는 유저가 로그인 되어있는지를 보고(쿠키를 통해)

쿠키가 없다면 백엔드에서 에러를 보내 login페이지로 보내는 기능이다.

 

아무튼 getServerSideProps 가 동작하지 않아 왜 그런지 찾아보니 Next13 버전부터는

getServerSideProps, 및 같은 이전 Next.js 데이터 가져오기 방법은 새로운 앱 라우터에서  getStaticProps
되지 않습니다.그러나 페이지 라우터에서 계속 사용할 수 있습니다. getInitialProps

그렇다고 한다.
버전을 업하면서 next 페이지 라우팅 방식의 변경과 폴더 구조가 변경됨에 따라 이전에 사용했던 방식들을 
지원하지 않은 것 같다.

이것 때문에 또 몇 시간을 썼는지.. 다른 방법을 찾아보다 해결을 못해 결국 버전 다운을 통해 12 버전으로
강의를 듣고 있다. 그래도 이번 오류를 해결하면서 next의 버전 업그레이드 된 사항과 getServerSideProps에 대해서도 좀 공부가 되었다.

 

Next 사이트 변경사항
https://nextjs.org/docs/app/building-your-application/data-fetching