PART 04. 데이터 페칭과 렌더링 전략
Nuxt.js가 가진 가장 강력한 능력은 "언제, 어디서 데이터를 가져올지" 직접 결정할 수 있다는 점입니다.
이 파트에서는 Nuxt 3가 제공하는 데이터 페칭 Composable인 useFetch와 useAsyncData의 동작 원리를 먼저 살펴봅니다. 그리고 SSR, SSG, ISR, CSR이라는 네 가지 렌더링 전략을 비교하여 서비스 성격에 맞는 방식을 선택하는 방법을 익힙니다.
브라우저 전용 API를 다루는 <ClientOnly> 컴포넌트, 하이드레이션 오류를 예방하고 해결하는 방법, 그리고 검색 엔진 최적화를 위한 Head 관리까지 다룹니다.
이 파트를 마치면 Nuxt 애플리케이션이 데이터를 어떻게 가져오고 HTML을 어떻게 완성하는지 전체 흐름을 이해하게 됩니다.
학습 목표
useFetch와useAsyncData의 차이를 설명할 수 있습니다.- SSR, SSG, ISR, CSR 각각의 특성과 적합한 서비스 유형을 구분합니다.
<ClientOnly>로 브라우저 전용 컴포넌트를 안전하게 렌더링합니다.- 하이드레이션 mismatch의 원인을 파악하고 수정합니다.
useHead와useSeoMeta로 페이지별 SEO 메타 태그를 관리합니다.