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

후로그램어 2019. 01. 10.


저는 Vue.js 로 SSR 을 하기 위해서 Nuxt.js 프레임워크를 사용하고 있습니다.

Nuxt 에서 화면을 렌더링하기 전에 데이터 요청할 수 있는 라이프사이클 훅을 두가지 제공하는데요.

asyncData()fetch() 입니다.

이 두 가지 중 어떤 것을 사용해도 비슷한 결과를 얻을 수 있었는데요.

각각 어떨 때 쓰는 것이 좋으며, 어떤 차이가 있는지 궁금합니다~!

공유하고 보상받기 ♥︎
댓글 0

1개의 답변이 있습니다.

질문자 & 큐레이터 채택
탁지원 답변자인증
센트비 2019. 01. 11
100%의 채택

안녕하세요. 두 개의 Hook은 매우 비슷해보이면서 목적은 다르다고 생각합니다.

두 가지 모두 컴포넌트가 로딩되기 전에 매번 호출된다는 점과 첫번째 인자로 컨텍스트 오브젝트를 받는다는 점은 비슷합니다.

하지만 asyncData는 페이지가 로딩되기전에 컴포넌트 data를 미리 지정하여 컴포넌트가 생성될 때 병합하는데에 목적이 있습니다.

즉 필요한 컴포넌트 data를 컴포넌트가 랜더링 되기 전에 미리 지정하여 보다 빠르게 구성한다는 데에 목적을 둔다고 생각을 합니다.

fetch 같은 경우에는 주로 비동기 작업을 작성하게 되면, 컴포넌트가 랜더링 되기전에 이 작업을 기다리게 됩니다.

예를들어 유저정보가 필요한 컴포넌트라면 fetch부분에 유저정보를 가져오는 API를 호출하여 활용할 수 있으리라 생각이 됩니다.

간단히 요약하자면

asyncData는 컴포넌트가 랜더링 되기전에 컴포넌트 데이터를 구성하는데에 목적이 있고,

fetch는 컴포넌트가 랜더링 되기전에 비동기로직을 호출하는데에 목적이 있다고 생각합니다!

댓글 0