Astro 5.5 server islands — 동적 컴포넌트 정착 6주

핵심 요약

Astro 5.5의 server islands로 정적 사이트의 일부 영역만 동적 SSR. 사내 마케팅 사이트 14개 페이지 정착 후 TTFB 평균 480ms → 280ms, CDN 캐시 hit율 92%. "정적이 메인, 동적은 island" 패턴이 강력.

1. server island 사용법

---
// src/pages/index.astro
import LoginStatus from '../components/LoginStatus.astro'
---
<Layout>
  <Hero />                  <!-- 정적 -->
  <LoginStatus server:defer fallback={LoginSkeleton} />
  <FeatureList />           <!-- 정적 -->
</Layout>

server:defer로 marked된 컴포넌트만 동적. 페이지 셸은 정적이라 CDN 캐시 가능.

2. 실측 — 14개 페이지

3. Suspense 경계 설계

island가 너무 잘게 쪼개지면 워터폴. 사용자 영역(헤더 사용자명·장바구니 카운트)을 한 island로 묶고, 추천 콘텐츠를 별도 island로. 페이지당 최대 3개 island 권장.

4. 함정

• Hydration mismatch — server:defer 안에서 cookies() 다른 결과 나오면 client mismatch, CSR fallback 필요
• CDN purge 정책 — 정적 부분만 long cache, dynamic island만 no-cache 헤더 명시
• A/B 테스트 — 정적 페이지에서 split testing 어려움, edge function으로 분기 권장
• Image optimization — island 내부 <Image />는 server context 필요