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

2019. 01. 10. 11:20

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

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

asyncData()fetch() 입니다.

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

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

공유하고 돈벌기 ♥︎

총 1개의 답변이 있습니다.

질문자 채택 답변
센트비

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

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

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

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

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

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

간단히 요약하자면

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

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

2019. 01. 11. 03:35
36