Nuxt.js에서 asyncData 와 fetch 의 차이

SIMZIPARK·2021년 6월 6일
1

Front-End

목록 보기
1/4

asyncData()

  1. Nuxt는 asyncData 훅이 끝날때까지 기다린 후 페이지를 이동(Navigating)하며, asyncData는 컴포넌트 로드 전 호출되므로(beforeCreate 전) this로 컴포넌트 인스턴스에 접근할 수 없다.
  2. 오직 page 컴포넌트에서만 사용 가능하다.
  3. asyncData는 데이터를 반환하며, local data()와 merge 된다.

    ✨ asyncData는 페이지가 로딩되기 전, 컴포넌트의 data를 미리 지정하여 컴포넌트 생성 시에 데이터를 병합하는데 목적이 있다.
    (필요한 컴포넌트 data를 컴포넌트 랜더링 전, 미리 지정하여 보다 빠르게 구성)

fetch()

  1. 모든 vue 컴포넌트에서 사용 가능하다.
  2. fetch는 컴포넌트 인스턴스가 생성된 후 호출되어(created 후) this로 인스턴스에 접근 가능하다.

    ✨ fetch는 주로 컴포넌트가 랜더링 되기 전, 비동기로직을 호출하는데 목적이 있다.
    (데이터를 스토어에 넣기위해서 사용)

두 가지의 공통점으로는

  1. 컴포넌트가 로딩되기 전, 매번 호출된다.
  2. 첫 번째 인자로 context 오브젝트를 받는다.

참고자료💡

Nuxt.js 에서 asyncData() 와 fetch() 은 차이는 무엇인가요?

profile
이겨내야쥐

0개의 댓글