React Islands 데모
1. 다크모드 토글
client:load - 페이지 로드 시 즉시 하이드레이션
테마 변경:
2. 검색 바
client:load - 즉시 사용 가능해야 함
3. 좋아요/싫어요 버튼
client:visible - 뷰포트에 보일 때 하이드레이션
React Islands 아키텍처 소개
Astro의 Islands 아키텍처는 페이지의 대부분을 정적 HTML로 렌더링하고, 필요한 부분만 React로 하이드레이션합니다. 이를 통해 빠른 초기 로드와 인터랙티브한 UI를 동시에 제공할 수 있습니다.
Hydration 전략
| 디렉티브 | 설명 | 사용 예시 |
|---|---|---|
client:load | 페이지 로드 시 즉시 | 검색, 폼, 메뉴 |
client:idle | 메인 스레드 여유 시 | 댓글, 사이드바 |
client:visible | 뷰포트 진입 시 | 좋아요, 위젯 |
client:media | 미디어 쿼리 충족 시 | 모바일 전용 UI |
Astro 마이그레이션 테스트 - React Islands 데모