Nuxt는 ofetch를 사용하여 Vue 앱 또는 API 경로 내에서 HTTP 요청을 만들기 위한 $fetch 헬퍼를 전역적으로 노출한다. 서버 측 렌더링 중에 $fetch 호출하여 내부 API 경로를 가져오면 저장 및 추가적인 API 호출과 같은 관련 함수(요청 에뮬레이션)를 직접 호출한다. useAsyncData 로 래핑하지 않은 채컴포넌트에서 $fetch 를 사용하면 서버에서 클라이언트로 상태를 전송하지 않기 때문에 클라이언트가 데이터를 다시 가져와야 하므로 가져오기가 양쪽에서 실행된다. 따라서 $fetch 를 사용하면 데이터를 두 번 가져온다. 처음에는 서버에서, 그 다음에는 하이드레이션 중에 클라이언트 측에서 다시 가져온다. 구성요소 데이터를 가져올 때 이중 데이터 가져오기를 방지하려면 useF..
2023. 12. 15. 14:25 / Tech정개블