1주일 넘게 Nextjs Redux next-redux-wrapper에 redux persist까지 사용하면서 씨름한 과정이다.
Nextjs를 왜 쓰는가?
SSR, SSG, CSR 다양한 렌더링을 리액트로 가능하게 하고 SSR을 쓰면 첫화면을 빠르게 볼 수 있게 하니까 사용자도 좋고 SEO도 좋고!
또 커뮤니티도 잘 발달하고 그 외 다양한 기능과 옵션을 제공한다.
그럼 Redux는 왜쓰는가?
컴포넌트가 점차 계속 늘어나고 자식에 자식에 자식에... 쭉가다가 보면 props로 계속 넘겨 주기는 힘들다. 파악도 힘들고 이 방법을 양방향 데이터 흐름 체계라고 한다. 대신에 어느 한곳에서 주고 받고 씹고 뜯고하면 쉽게 파악도 하고 협업에도 좋고 이 방법은 단방향 데이터 흐름체계이고 이를 가능하게 하는 상태관리 라이브러리가 Redux이다. 그리고 Redux toolkit, RTK를 쓰면 문법도 정돈되고 통신도 편해진다.
그럼 next-redux-wrapper는 무엇인가?
https://github.com/kirill-konshin/next-redux-wrapper
먼저 정확한 내용은 위에 공식 GitHub이다.
그럼 내 생각을 정리하면 Nextjs로 얻는 큰 이득은 SSR, SSG일 것이다. 화면을 미리 구성하고 이를 뿌려주고 나중에 Hydration을 통해 핸들러를 붙여주면 사용자는 "음 화면이 이렇게 있구만 하면서 파악도 하고" SEO입장에서는 "삐빅 이런 이런 화면 구성입니다!"하고 파악하니까 그런데 만약 Redux에서 사용하는 store가 클라이언트만 있다면 어떻게 될까? SSR로 그림을 그려도 계속 데이터없는 빈 화면 즉 앙꼬없는 찐빵이다. 이를 도와주는게 next-redux-wrapper이다.
그럼 next-redux-wrapper가 어떻게 도와주는데?
https://github.com/kirill-konshin/next-redux-wrapper
이번에는 redux toolkit의 공식 홈페이지에서 ssr에 있는 예제이다.
쉽게 서버측에서 store를 구성하고 데이터를 받던 dispatch를 하던가 하고 이렇게 구성된 store를 클라이언트에 덮어준다.
위 예제를 실행해 보면 SSR, SSG, dynamic 3가지 렌더링 방식으로 포켓몬 api를 써서 보여준다. 특히 내가 놀란부분은 dynamic부분을 구성하고 그걸 그대로 불러온 상태에서 getServerSideProps, getStaticProps 2가지만으로 SSR SSG를 각 함수를 사용해 서버측에서 dispatch하고 getRunningQueriesThunk()를 이용해 이를 기다린 후 화면을 구성해 SSR, SSG로 처리가능하게 했다. 실제로 개발자 도구로 확인해도 dynamic은 후에 렌더링되어 서버에서 넘겨져오는 모습이 SSR, SSG 차이가 있다.
Redux Persist도 알아볼까?
Redux Persist는 로컬 스토리지, 세션 스토리지에 store를 저장해 놓고 페이지를 새로고침 이동해도 그대로 이용하도록 사용하는 것이다. 이를 이용해 페이지에 유지될 부분을 사용할 수 있지만 말 그대로 로컬, 세션 스토리지를 이용하기에 next-redux-wrapper에서도 굳이 서버사이드로 사용할 껀데 넣을 필요가 있나고 한다... 대신에 next-redux-cookie-wrapper 사용해 정말 필요한 state에만 사용하라고 한다.
나는?
저는 이 둘을 이용해 헤더(네비게이션바)에서 로그인을 처리하려는 로직을 만들고 있습니다. 헤더에서 refresh토큰을 확인하고 있다면 페이지 접속마다 access토큰을 발급받고 이를 통해 CRUD작업이 가능하도록 하는 중입니다. 기존 계획은 access토큰을 발급 받아 Redux Persist의 세션스토리지에 저장해서 계속된 발급 없이 사용하려했으나 보안상으로 좋은 방법이 아니라 해 refresh토큰의 페이지별 계속된 발급 vs 보안 중 고민 중이다!
