Nuxt.js asyncData, fetch 차이점 및 사용법 | 간단 예제를 통한 비교 (Data Fetching Hook)

Nuxt.js asyncData, fetch 차이 및 사용법 간단 예제 (Nuxt.js Data Fetching Hook)

라이프사이클 다이어그램 (Nuxt.js Lifecycle Hooks)

Nuxt.js asyncData, fetch 동작 방식을 이해하기 전에 해당 메서드가 어디서 실행되는지 Nuxt.js 라이프사이클 다이어그램을 이해하는 것이 필요합니다. Nuxt.js 개발자는 아래 다이어그램을 꼭 인지하고 계실 필요가 있습니다.

Nuxt.js Lifecycle Hooks

asyncData

서버사이드(Server)에서 데이터를 가져와서 랜더링을 하고싶은 경우가 있습니다. Nuxt.js는 컴포넌트 데이터를 세팅하기 전에 비동기 처리를 할 수 있도록 하기 위해서 asyncData 메소드를 제공합니다. asyncData는 페이지 컴포넌트가 로드되기 전(route가 변경될 때)에 항상 호출되는 메소드입니다.

페이지 컴포넌트 예시

asyncData에서는 서버측에서 비동기 데이터를 처리할 수 있습니다. 여기서 처리된 데이터가 컴포넌트 데이터와 병합됩니다! 아래는 초기화된 컴포넌트 데이터가 asyncData에서 세팅된 데이터로 병합된 예시입니다.

컴포넌트 데이터 병합 예시

asyncData 메소드에서 비동기 데이터를 처리하는 모습

컴포넌트 데이터의 value 프로퍼티의 초기값을 0으로 설정했지만, asyncData의 비동기 데이터 처리(async/await)를 통해 status(200)값을 value에 할당하고 결과를 확인하면 화면에 status 값인 200이 노출되는 것을 확인할 수 있습니다. 이처럼 컴포넌트 데이터는 asyncData와 병합됩니다.

asyncData 결과와 병합됨으로써 화면에 200으로 노출되는 모습

fetch

fetch 메소드는 페이지가 랜더링되기 전에 데이터를 스토어에 넣기 위해서 사용합니다. 컴포넌트의 데이터를 세팅하지 않는 점을 빼고는 data 메소드와 비슷합니다. fetch 메소드가 세팅되어 있으면 페이지 컴포넌트가 로드되기 전에 매번 호출됩니다. 초기엔 서버사이드, 그 후엔 클라이언트 사이드에서 사용자가 페이지를 이동하기 전에 호출됩니다.

<template>
  <h1>{{ $store.state.status.like }}</h1>
</template>

<script>
export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/status/like')
    
    store.commit('setLikeStatus', data) // store 데이터 처리
  }
}
</script>

asyncData와 fetch 차이점

• asyncData()는 페이지 컴포넌트 데이터와 병합되지만, fetch()는 페이지 컴포넌트가 랜더링되기 전에 정제된 데이터를 스토어(Vuex Store)에 넣기 위해서 사용됨
• asyncData()의 리턴 값은 데이터 객체, fetch 리턴 값은 Promise

정리

asyncData()와 fetch() 메소드의 공통점은 모두 서버사이드에서 데이터 처리를 하기 위해 사용됩니다. 그리고 각 메소드의 첫 인수가 컨텍스트(Context) 객체로 동일합니다. 페이지 컴포넌트 데이터와 병합할 경우엔 asyncData() 메소드, 스토어(Vuex Store) 데이터 처리를 할 경우엔 fetch() 메소드를 사용하면 됩니다.