Nuxt.js / SSR / 비동기 데이터 서버사이드 렌더링시 주의사항

정말.. 말도 안되게 삽질을 했어서 포스팅을 하게되었다. Nuxt.js 로 프로젝트를 진행하던 중

서버사이드 렌더링을 해야하는 구간에서 비동기데이터를 조회하여 처리하는 과정이다.

사전에 Nuxt.js 라이프사이클을 이해하는게 중요하다.

요약하자면 다음과 같다.

상황 : 전역컴포넌트 (GNB) 와 데이터 리스트를 SSR 처리해야하는 상황

나는 다음과 같이 처리하였다. 

1. Vuex 의 State 를 구성

// 생략

2. Vuex 에서 nuxtServerInit 메소드를 async/await 으로 비동기 처리수행.

3. Vuex 의 Store 중 dispatch 하기위한 actions 의 메소드역시 async/await 으로 구성하여 작성.

4. 서비스 전역에서 사용하기 위하여 미들웨어를 작성하여 nuxt.config.js 에 등록. 미들웨어 역시 async/await

5. pages 컴포넌트에서 asyncData 에서 데이터를 요청하여 리턴 (async/await) asyncData 메소드를 사용하면 data 메소드와 Merge 됨.

위와 같이 서버에서 렌더링을 하기 위해 Vuex > Middleware > Pages 로 코드를 작성하였다.

죽어라 삽질을 했던 이유는... 저 중에서 미들웨어에서 async/await 을 빼먹었다..

너무 단순한데서 실수 했기때문에 위와같은 절차를 기억하기위해 정리 포스팅을 합니다.