Next.js 에서는 Redux Wrapper를 사용해야 합니다.

HTML, CSS 가 끝나고 신나게 Mongodb 세팅을 마치고 POST와 GET 등 메서드를 실험해 보고 있었는데 나는 드릴링을 좋아하지 않기에 아 맞다 Redux! 라는 생각이 들었다. 기존에 사용하던 Redux-toolkit을 사용하려 했지만 React와는 달리 Next는 SSR이니 그냥 Redux-toolkit을 사용하면 안 될 것 같다는 생각이 들었고 검색을 해봤다.

Redux Wrapper

Redux-wrapper은 Next 개발환경에서 쓰면 좋다고 했다. 그 이유는 next-redux-wrapper 깃헙 페이지에 있는데 여기를 살펴보면

1. Next.js 정적 사이트 생성기 또는 서버 측 렌더링이 관련된 경우 Redux 연결 구성 요소를 렌더링 하기 위해 서버에 다른 저장소 인스턴스가 필요하므로 상황이 복잡해진다.
2. Next.js 정적 사이트 생성기나 서버 사이드 렌더링이 포함되면 Redux와 연결된 컴포넌트를 렌더링 하기 위해 서버에 추가 스토어 인스턴스가 필요해지고, 페이지의 getInitialProps에서 Redux 스토어에 접근해야 할 수도 있다고 한다.

위 문제들에 next-redux-wrapper가 유용하게 사용될 수 있는데 그 이유는

자동으로 스토어 인스턴스를 생성하고 모두 동일한 상태를 가지도록 보장하기 때문이라고 한다.