[NuxtJS] nuxtServerInit이란?

nuxtServerInit

NuxtJS의 라이프 사이클을 보면 최상단에 존재하는 nuxtServerInit이라는 녀석에 대해 의문을 가져본 적이 있을 것이다.

nuxtServerInit은 단어 그대로 서버 측에서 실행되는 녀석인데, 특이하게도 NuxtJS의 universal 모드에서만 사용할 수 있는 action 함수이다.

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}

위 예제처럼 nuxtServerInit은 서버 사이드 렌더링 시점에 실행되기 때문에 미리 데이터를 설정해 놓고나 서버에서만 접근할 수 있는 데이터를 다룰 때 유용하다.

 

그리고 또 특이한 점이 있는데 nuxtServerInit은 기본 모듈(store/index.js)에서만 작업이 가능하다.

actions: {
  async nuxtServerInit({ dispatch }) {
    await dispatch('core/load')
  }
}

이번 예제는 비동기 방식으로 처리하는 예제인데, 비동기는 대체적으로 async/await를 사용한다.

 

마지막으로 알아둬야 할 부분은 nuxtServerInit은 두 개의 파라미터를 받아 사용할 수 있는데,

첫 번째 파라미터는 스토어의 컨텍스트로 위 예제들처럼 commit, dispatch 등을 받아 사용하며

두 번째 파라미터는 asyncData나 fetch 같은 것들처럼 Nuxt의 컨텍스트 객체를 받는다.

 

이렇게 nuxtServerInit은 그냥 어떤 특징을 가지고 있고 보통 어느 때 사용하는지만 알고 있으면,
필요한 상황에 가져다 쓰기 충분할 거라 생각된다.

---

참고: https://nuxtjs.org/docs/directory-structure/store/#the-nuxtserverinit-action

Store directory