React vs Astro — 정적 사이트에 뭘 쓸까

정적 사이트의 정의

여기서 “정적 사이트”란 콘텐츠 중심 사이트를 말한다. 블로그, 포트폴리오, 랜딩 페이지, 문서 사이트. 로그인이나 실시간 데이터가 필요 없는 사이트.

이런 사이트에 React를 쓰는 건 트럭으로 편의점에 가는 것과 비슷하다. 도착은 하지만 과하다.

번들 사이즈 비교

동일한 포트폴리오 사이트를 React(Next.js SSG)와 Astro로 만들었을 때:

항목	Next.js SSG	Astro
총 JS	~95KB	~2KB
HTML	서버 렌더링 + 하이드레이션	순수 HTML
First Load JS	~85KB (React 런타임)	0KB
LCP	1.2초	0.5초

Astro는 기본적으로 JavaScript를 보내지 않는다. 인터랙션이 필요한 컴포넌트에만 선택적으로 JS를 추가한다.

React가 필요한 경우

• 복잡한 상태 관리: 폼, 필터, 장바구니 등 클라이언트 상태가 많은 경우
• 실시간 업데이트: WebSocket, SSE 기반 라이브 데이터
• SPA 네비게이션: 페이지 전환 시 상태를 유지해야 하는 경우
• 팀의 기술 스택: 팀 전체가 React에 익숙하고, 새로운 프레임워크 학습 비용을 감당하기 어려운 경우

Astro가 더 나은 경우

• 콘텐츠 중심: 블로그, 포트폴리오, 문서
• SEO 중요: 검색 노출이 핵심인 사이트
• 성능 중요: Core Web Vitals 점수가 비즈니스에 영향
• 빠른 구축: 마크다운/MDX로 콘텐츠를 관리하고 싶은 경우

Astro Islands — 둘 다 쓰기

Astro의 “Islands Architecture”는 정적 HTML 안에 인터랙티브한 컴포넌트(React, Vue, Svelte)를 섬처럼 끼워넣는 구조다.

---
import StaticHeader from './StaticHeader.astro';
import InteractiveSearch from './Search.tsx';
---

<StaticHeader />
<!-- 이 부분만 React가 로드됨 -->
<InteractiveSearch client:visible />

client:visible은 컴포넌트가 뷰포트에 들어올 때만 JavaScript를 로드한다. 페이지 상단의 정적 콘텐츠가 먼저 렌더링되고, 스크롤해서 검색 컴포넌트가 보일 때 React가 로드된다.

이 방식이면 “전체를 React로 만들 것인가, 말 것인가”의 이분법에서 벗어날 수 있다.

빌드 속도

규모	Next.js SSG	Astro
10페이지	5초	1초
100페이지	15초	3초
1000페이지	60초	10초

Astro의 빌드 속도가 빠른 이유는 JavaScript 번들링 단계가 없기 때문이다. HTML을 직접 생성한다.

DX (Developer Experience) 비교

항목	React (Next.js)	Astro
라우팅	파일 기반	파일 기반
스타일	CSS Modules, styled-components, Tailwind	Scoped CSS, Tailwind
콘텐츠 관리	MDX (추가 설정 필요)	Content Collections (내장)
타입 안전성	TypeScript	TypeScript
생태계	매우 풍부	성장 중
러닝 커브	중간	낮음 (HTML을 안다면)

Astro의 .astro 파일은 HTML과 거의 같다. JSX 문법을 모르는 사람도 바로 쓸 수 있다.

마이그레이션

기존 Next.js SSG 사이트를 Astro로 마이그레이션하는 건 생각보다 쉽다.

1. 페이지 컴포넌트를 .astro로 변환 (JSX → Astro 템플릿)
2. 정적 컴포넌트는 그대로 .astro로
3. 인터랙티브 컴포넌트는 .tsx로 유지하고 client:* 디렉티브 추가
4. CSS/Tailwind는 거의 그대로 사용 가능
5. Content Collections로 콘텐츠 관리 전환

Karnel Labs 사이트 마이그레이션은 하루 만에 끝났다. 대부분의 시간은 JSX를 Astro 템플릿으로 변환하는 데 쓰였다.

결론

정적 사이트에는 Astro가 더 적합하다. 성능, 빌드 속도, SEO 모두에서 유리하고, 필요하면 React를 부분적으로 쓸 수 있다. “기본은 Astro, 인터랙션이 필요한 곳만 React”가 2026년 정적 사이트의 최적 조합이다.