SSR 을 위한 데이터 처리

Question

강의에서는 getInitialProps 가 서버, 클라이언트 모두 실행되기 때문에 ssr 처리를 위한 api 를 호출한다고 하신거 같은데 저는 nextjs 사용하면서 컴포넌트 내에 직접 api 호출 로직을 가지고 있고 싶지 않아서 ssr 처리를 위한 api 호출은 express 라우터 컨트롤러에서 호출하도록 하였습니다. 나머지 api 들은 사가에 넣고 처리하도록 하였구요. 이 부분까지는 어느정도 장단이 있거나 취향으로 생각할 수 도 있을 것 같은데 어떻게 생각하시는지 궁금합니다. 그리고 SSR 처리시 props 가 아닌 state 로 렌더링 하고 싶다면 createStore 실행 시점에 preloadState 에 해당 api 응답 값이 들어가서 store 가 생성되고 컴포넌트에 전달 되어야 컴포넌트 내에서 state 로 참조하여 렌더링할 수 있습니다. 하지만 언급하신 컴포넌트 내 getInitialProps 사이클에서 api 호출시 createStore 실행 시점에 preloadState 로써 값 전달이 힘들 것 같은데요. 이런 경우는 어떻게 처리할 수 있는지도 궁금합니다. 저는 getInitialProps 에서 api 호출하여 응답값을 컴포넌트의 props 로 넘기고 해당 값을 dispatch payload 값으로 넘겨 리듀서를 통해 store 에 넣었습니다. 그리고 나서 state 를 꺼내서 컴포넌트에서 참조하도록 하였는데 이 경우도 ssr 처리는 잘 되었지만 적절하지 않은 스토어 초기화를 위한 액션이 발생하는 것 자체가 부자연 스러운 것 같 습니다. 그래서 express 라우터 컨트롤러에서 호출하여 _app.js 로 넘겨 거기서 store 생성시 참조하도록 하고 있습니다. 혹시 더 좋은 방법이 있을까요?

제로초(조현영) · Answer

getInitialProps에서 처리하고싶지 않으신 이유가 있나요? 사실 이 경우는 next를 쓸 이유가 크게 떨어지긴 합니다. 하지만 문제는 없습니다. state(리덕스 말씀하시는거죠?)로 렌더링하시려면 getInitialProps에서 context.store.dispatch 하셔야합니다. 여기에서 액션이 부자연스럽다는 말씀이 어떤 뜻인지 지금으로서는 잘 모르겠습니다. 현재 next.js의 기능을 사용하지 않으신다면 그냥 express 상에서 react SSR을 하는 게 더 효율적이어 보입니다. 그 때 store에 state도 넣어줄 수 있는데 이 경우에도 express에서 store.dispatch를 하긴 합니다.