Nuxt header asyncdata 질문

비동기 데이터를 가져오는 데 있어서는 Nuxt.js의 asyncData와 fetch 메서드가 서버사이드 렌더링(SSR)을 지원합니다. `asyncData`는 페이지 컴포넌트에만 사용할 수 있으며, 이를 사용하면 SSR 과정에서 외부 데이터를 로드하고 이를 페이지에 직접 적용할 수 있습니다. 그러나 이것은 레이아웃과 일반 컴포넌트에서는 작동하지 않습니다. 탐색 바와 같은 글로벌 컴포넌트에 비동기 데이터를 가져오려는 경우 일반적으로 `fetch` 메서드 또는 클라이언트 사이드 렌더링(CSR)을 사용합니다. `fetch` 메소드는 `asyncData`와 유사하지만 페이지 컴포넌트, 레이아웃 및 일반 컴포넌트 모두에서 작동합니다. 따라서 해결책은 헤더(또는 레이아웃) 내에 직접 비동기 호출을 하는 것입니다. ```javascript export default { data () { return { menuList: [] } }, async created () { this.menuList = await this.$axios.$get('url-to-fetch-menu') } } ``` 위의 예제에서 url-to-fetch-menu 부분에 메뉴 리스트를 불러올 API 주소를 입력하면 됩니다. 또는 `fetch` 메서드를 사용할 수 있습니다: ```javascript export default { data () { return { menuList: [] } }, async fetch () { this.menuList = await this.$axios.$get('url-to-fetch-menu') } } ``` 위의 방법들은 CSR 패턴을 따르지만, Nuxt.js는 `fetch`가 호출되는 시점에 따라 SSR도 지원합니다. Nuxt.js v2.12 이상에서는 `fetch` 또한 Promise를 반환하므로 SSR을 지원하여 첫 페이지 로딩 시 데이터를 가져올 수 있습니다.