Nuxt - asyncData

asyncData

lifecycle 에서 asyncData 는 프론트 서버 사이드 렌더링 시점에 발생하며 페이지 로딩 시점에 발생합니다.

또한, 기존 Vue 와 달리 asyncData 를 활용하면 서버사이드에서 처리하기 때문에 SEO 최적화를 할 수 있습니다.

nuxt 에서 pages 폴더 아래에 위치하는 컴포넌트에서만 사용할 수 있는 속성으로 페이지 진입전에 호출하고 this 를 사용하지 않음.

export default {
  // params의 id가 1이라고 가정
  async asyncData({ params, $http }) {
    const response = await axios.get(`/users/${params.id}`);
    const user = response.data;
    return { user }
  }
}

context

asyncData 에 파라미터는 context 로 스토어, 라우터, 서버 사이드 응답, 요청 등 관련 속성에 접근할 수 있음.

function (context) { // asyncData, plugins, middleware, ...
  // Always available
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
   $config
  } = context

  // Only available on the Server-side
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }

  // Only available on the Client-side
  if (process.client) {
    const { from, nuxtState } = context
  }
}

에러 핸들링

asyncData 에서 에러 발생시 error 속성을 사용해서 에러 페이지로 이동시킬 수 있음.

export default {
  async asyncData({ params, $http, error }) {
    try {
      const response = await axios.get(`/users/${params.id}`);
      const user = response.data;
      return { user }
    } catch(e) {
      error({ statusCode: 503, message: 'API 요청이 실패했습니다 다시 시도해 주세요' })
    }
  }
}

asycnData 에서 redirect 사용하기

export default {
  asyncData({ redirect }) {
    redirect('/login')
  }
}