SSR 을 위한 데이터 처리

강의에서는 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 생성시 참조하도록 하고 있습니다.

혹시 더 좋은 방법이 있을까요?