You're Probably Using Nuxt Wrong

Nuxt.js의 useAsyncData는 useFetch를 활용하지만 useAsyncData 아래에서 실제로 일어나는 현상은 useAsyncData 안의 내부 함수 입니다. ✨

useAsyncData는 초기 fetch를 수행하는 내부 함수와 함께 promise를 생성하고, onServerPrefetch 라이프사이클 호크가 promise가 resolve되기 전까지 컴포넌트를 렌더링하도록 합니다 🚀.

await useAsyncData 사용은 SSR 시에는 필수가 아니지만, 클라이언트에서 페이지 이동 시 퍼포먼스 향상에 도움이 됩니다 ⬆️.

lazy: true를 설정하면 초기 렌더링에서만 데이터를 가져오고, 페이지 이동 시에는 늦추어서 가져오므로 페이지 이동이 순간적이게 됩니다. ⚡️

server: false 설정은 SSR을 사용하지 않고 컴포넌트를 렌더링할 때, useAsyncData가 데이터를 가져오도록 합니다. 🤔

immediate: false 설정은 클라이언트에서 useAsyncData가 즉시 데이터를 가져오도록 하지 않고, refresh() 함수를 사용하여 데이터를 격자하고 조절할 수 있도록 합니다. 🗓️