AI 요약관련 정보

• Astro 클라이언트 디렉티브는 UI 프레임워크 컴포넌트의 하이드레이션 방식을 제어하며, 기본적으로 Astro는 JavaScript를 포함하지 않아 디렉티브 없이는 하이드레이션되지 않습니다. 💧
• 클라이언트 디렉티브는 오직 UI 프레임워크 컴포넌트에만 사용 가능하며, 사용자 정의 컴포넌트나 동적 태그에는 적용할 수 없습니다. 🚫
• client:load는 페이지 로드 시 컴포넌트 JavaScript를 즉시 하이드레이션하는 최우선 순위 디렉티브로, 즉각적인 상호작용이 필요한 요소에 적합합니다. 🚀
• client:idle은 페이지 초기 로드가 완료된 후 컴포넌트를 하이드레이션하는 중간 우선순위 디렉티브로, requestIdleCallback을 사용하며 timeout 옵션으로 최대 대기 시간을 설정할 수 있습니다. ⏳
• client:visible은 컴포넌트가 뷰포트에 들어올 때 하이드레이션하는 낮은 우선순위 디렉티브로, IntersectionObserver를 활용하며 rootMargin 옵션으로 하이드레이션 시점을 조절할 수 있습니다. 👁️
• client:media는 특정 CSS 미디어 쿼리가 충족될 때 컴포넌트를 하이드레이션하는 낮은 우선순위 디렉티브로, 사이드바 토글이나 햄버거 메뉴와 같은 반응형 UI에 유용합니다. 📱
• client:only는 컴포넌트의 서버 사이드 렌더링을 방지하고 페이지 로드 시 즉시 하이드레이션하지만, 반드시 사용되는 UI 프레임워크를 명시해야 하며, 로딩 중 fallback 메시지를 표시할 수 있습니다. 🚧