[Vue] Nuxt Lifecycle

Nuxt SSR 에서 created 에 로그를 찍었는데 두번호출되는것을 보고 라이프 사이클을 찾아봤지만

대부분 아래 이미지만 붙여놔서 찾아보다 공식사이트에 글로 정리된 부분을 보니 이해가 되었다.

 

https://nuxtjs.org/docs/concepts/nuxt-lifecycle/

 

 

라이프사이클이 서버와 클라이언트로 나눠져있고,

당연한 얘기지만 서버가 끝난 후 클라이언트가 진행 된다.

 

Lifecycle

Server

For SSR, these steps will be executed for every initial request to your app

• The server starts (nuxt start)

When using static site generation, the server steps are only executed on build time, but once for every page that will be generated

• The generation process starts (nuxt generate)
• Nuxt hooks
• serverMiddleware
• Server-side Nuxt plugins
  • in order as defined in nuxt.config.js
• nuxtServerInit
  • Vuex action that is called only on server-side to pre-populate the store
  • First argument is the Vuex context, second argument is the Nuxt context
    • Dispatch other actions from here → only "entry point" for subsequent store actions on server-side
  • can only be defined in store/index.js
• Middleware
  • Global middleware
  • Layout middleware
  • Route middleware
• asyncData
• beforeCreate (Vue lifecycle method)
• created (Vue lifecycle method)
• The new fetch (top to bottom, siblings = parallel)
• Serialization of state (render:routeContext Nuxt hook)
• the HTML rendering happens (render:route Nuxt hook)
• render:routeDone hook when HTML has been sent to the browser
• generate:before Nuxt hook
• HTML files are generated
  • Full static generation
    • e.g. static payloads are extracted
  • generate:page (HTML editable)
  • generate:routeCreated (Route generated)
• generate:done when all HTML files have been generated

Client

This part of the lifecycle is fully executed in the browser, no matter which Nuxt mode you've chosen.

• Receives the HTML
• Loading assets (e.g. JavaScript)
• client-side Nuxt plugin
  • in order as defined in nuxt.config.js
• Vue Hydration
• Middleware
  • Global middleware
  • Layout middleware
  • Route middleware
• asyncData (blocking)
• beforeCreate (Vue lifecycle method)
• created (Vue lifecycle method)
• The new fetch (top to bottom, siblings = parallel) (non-blocking)
• beforeMount (Vue lifecycle method)
• mounted (Vue lifecycle method)

Navigate using the NuxtLink component

Same as for the client part, everything is happening in the browser but only when navigating via <NuxtLink>. Furthermore, no page content is displayed until all blocking tasks are fulfilled.

 

Check out the component chapter to see more info on <NuxtLink>

• middleware (blocking)
  • Global middleware
  • Layout middleware
  • Route middleware
• asyncData (blocking) or full static payload loading
• beforeCreate & created (Vue lifecycle methods)
• fetch (non-blocking)
• beforeMount & mounted

 

참조 : https://nuxtjs.org/docs/concepts/nuxt-lifecycle/