Astro 5 Server Islands — 정적과 동적의 균형, 실전 정답 | 기술노트

핵심 요약

Astro 5(2025-12 GA)의 Server Islands는 "정적 페이지에 동적 조각만 박는다"를 표준 문법으로 만들었다. 결과: 마케팅 페이지의 LCP는 SSG처럼 빠르면서 가격·재고처럼 매 요청 달라지는 부분은 SSR. SaaS 랜딩에서 가장 큰 변화.

1. 무엇이 새로운가

---
// page.astro
import Cart from '../components/Cart.astro'
---
<html>
<body>
  <h1>상품 소개</h1>
  <!-- 정적: 빌드 시 렌더 -->
  <Features />
  <!-- 서버 아일랜드: 매 요청 서버에서 렌더 -->
  <Cart server:defer />
</body>
</html>

server:defer가 핵심. 페이지는 정적으로 즉시 보이고, 카트 슬롯만 HTML 스트림으로 채워진다.

2. 캐시 정책 — 가장 헷갈리는 부분

위치	캐시	예시
정적 부분	CDN edge 영구	제목·이미지·설명
Server Island	요청마다 렌더 (기본)	가격·재고·로그인 상태
Island + Cache-Control	지정한 TTL	"분당 갱신 환율 위젯"

// island.astro
---
Astro.response.headers.set('Cache-Control', 's-maxage=60')
const rate = await getExchangeRate()
---
<span>{rate}</span>

3. 데이터 페칭 — fallback과 ESI 비유

Server Island가 늦으면 fallback이 먼저 보이고 swap.

<Cart server:defer>
  <CartSkeleton slot="fallback" />
</Cart>

원리는 Edge Side Include(ESI)와 유사. HTML 안에 placeholder → 서버 응답에서 채움.

4. View Transitions와 결합

---
import { ClientRouter } from 'astro:transitions'
---
<head><ClientRouter /></head>

페이지 이동 시 부드러운 전환 + Server Island 다시 페칭. SPA 느낌인데 JS 거의 없음.

5. SEO와 호환

핵심: 서버 아일랜드 응답이 같은 요청에 합쳐져 한 HTML로 나간다. Googlebot은 SSR과 구분 못 함. noindex는 페이지 단위로 지정.

6. 실측 — 같은 SaaS 랜딩

구현	TTFB	LCP	JS	인프라 비용
전체 SSR (Next.js)	180ms	820ms	62kB	$$$ (서버)
전체 SSG + 클라이언트 페칭	20ms	700ms	34kB	$
Astro 5 + Server Islands	40ms	520ms	4kB	$$ (Island만 동적)

7. React/Vue 컴포넌트 통합

Astro의 강점. 기존 React 컴포넌트 그대로 가져와 Island로.

---
import ReactCart from './ReactCart.tsx'
---
<ReactCart client:visible />   {/* 클라이언트 island */}
<ReactCart server:defer />     {/* 서버 island */}

8. 흔한 함정

Server Island가 너무 무거움: HTML이 다 늦어짐. 무거우면 client island로.
Island 안에서 redirect: 페이지 본문은 이미 나갔으므로 redirect 못 함. 페이지 단에서.
쿠키 의존 Island: 캐시 시 다른 사용자가 본다. private 또는 캐시 끔.
nested island: 지원되지만 한 단계 정도가 권장.

9. 도입 결정

사이트 유형	Astro 5 적합도
마케팅·블로그·문서	★★★★★
e커머스 (제품·검색)	★★★★
대시보드·SaaS 앱	★★ (Next/Remix가 나음)
실시간 협업 앱	★ (부적합)

참고

docs.astro.build/en/guides/server-islands
astro.build/blog/v5 — release notes