Nuxt.js 에서 asyncData() 와 fetch() 은 차이는 무엇인가요?
2019. 01. 10. 11:20
안녕하세요. 두 개의 Hook은 매우 비슷해보이면서 목적은 다르다고 생각합니다.
두 가지 모두 컴포넌트가 로딩되기 전에 매번 호출된다는 점과 첫번째 인자로 컨텍스트 오브젝트를 받는다는 점은 비슷합니다.
하지만 asyncData는 페이지가 로딩되기전에 컴포넌트 data를 미리 지정하여 컴포넌트가 생성될 때 병합하는데에 목적이 있습니다.
즉 필요한 컴포넌트 data를 컴포넌트가 랜더링 되기 전에 미리 지정하여 보다 빠르게 구성한다는 데에 목적을 둔다고 생각을 합니다.
fetch 같은 경우에는 주로 비동기 작업을 작성하게 되면, 컴포넌트가 랜더링 되기전에 이 작업을 기다리게 됩니다.
예를들어 유저정보가 필요한 컴포넌트라면 fetch부분에 유저정보를 가져오는 API를 호출하여 활용할 수 있으리라 생각이 됩니다.
간단히 요약하자면
asyncData는 컴포넌트가 랜더링 되기전에 컴포넌트 데이터를 구성하는데에 목적이 있고,
fetch는 컴포넌트가 랜더링 되기전에 비동기로직을 호출하는데에 목적이 있다고 생각합니다!