Nuxt.js 를 사용하다 보면 페이지가 마운트되기 전에 백엔드에서 API 를 호출하여 데이터를 가져와야 할 때가 많이 있다. 이럴때 asyncData와 fetch를 이용해 데이터를 로드한다.
asyncData
- 페이지 레벨에서만 제한되며, this 사용이 불가능하고, 데이터를 반환하여 페이로드를 추가한다.
- data 를 컴포넌트 내에 선언할 필요가 없으며, asyncData 는 local data 와 merge 된다. 라고 설명하고 있습니다.
- asyncData는 자동으로 data()의 데이터들과 병합을 합니다.
fetch
- 모든 뷰 컴포넌트에서 사용이 가능.
- this 사용이 가능.
- 단순 로컬 데이터를 변경한다.
빠굥