NextJS getServerSideProps SSR에서 HOF를 이용한 auth 검증

page router 기반에서 SSR 사용을 위해 사용 되는 getServerSideProps

여기서 굉장히 불편한 상황이 발생하는데 바로 원하는 ssr에 사용될 로직을 사용하지도 않았는데 accessToken과 cookie를 넣어서 인증된 사용자인지 검증하는 로직을 ssr 사용되는 모든 페이지에 사용 되야 하는 번거로움이 따르고 아주 많은 중복 코드가 발생한다.

withAuthServerSideProps.ts

로그인 상태일경우 acceeToken을 header Bearer 토큰에 넣어주고 refreshToken을 cookie에 넣어준 상태의 axios 인스턴스를 반환해주고 로그인 상태가 아닐경우 로그인 페이지로 이동시키는 고차함수

GroupDetailInviteCodePage.tsx 에서 SSR 사용시

 

이미 해당 그룹에 가입자라면 그룹 디테일 페이지로 이동시키는 ssr 로직을 가독성있게 넣어줄 수 있게 되었다.

ScheduleEditPage에서 SSR 사용

기존 레거시 코드

HOF함수 적용

 

Reference

- ( https://github.com/vercel/next.js/discussions/10925 )

- ( https://github.com/timfee/nextauthjs-server-side-props-wrapper/blob/main/utils/withSSR.ts )

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

- ( https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering )