Next와 Redux 그리고 SSR 이야기

Next로 넘어가는 이유가 많겠지만,

SSR과 Routing, webpack의 편리성을 주로 생각한다.

 

Next로 넘어와서 고생한 작업이 이 State 관리를 위해 넣은

Redux 이다.

 

정확하게 해결한지는 모르겠지만, 처음에 React에서 쓰던 것처럼

Redux를 생각하고 사용하였더니 라우팅을 걸쳐 다른 페이지로 이동하니

State들이 다시 만들어져 초기화가 되는 게 아닌가?

 

wrapper를 이용하여, store에 접근을 해봤지만, 당연히

클라이언트쪽에서는 새로운 state를 생성하고 있었다.

 

공식문서도 읽고 구글링도 해봤는데, 결론은 getInitalProps로 해결하자는 것 이었다.

getInitalProps는 검색해보면 알겠지만, 우리 앱의 진입점에서 필요한 state들을 미리 받아

저장해놓는 것이다. ( lifecycle 참조 )

 

- 앱 진입 시점에서는 우리의 _app.tsx를 거치니까 거기서 initialState를

우리가 원하는 정보로 채워 넣는다 생각하면 편하다.

 

물론 getInitalProps을 이용하면 퍼포먼스 저하라는 단점을 안고 가야한다.

 

공식문서에서도, 이런 문제들을 이야기하는데, 보통 다른 예제에서

왜 getState라는 함수를 안쓰고, dispatch만 쓰는지 이해가된다.

 

이 글을 본다면 여러가지 이유로 state를 redux로 유지하려고 한다는 건데,

만약 auth의 쿠키쪽 문제라면, 공식문서에 cookie 관련 package recommend 가 있으니, 

그 패키지를 이용해 보는게 좋을 것같다.