Astro의 핵심: 기본적으로 JavaScript를 보내지 않는다. 정적 HTML을 생성하고, 인터랙션이 필요한 부분만 Islands Architecture로 JavaScript를 로드합니다. 콘텐츠 사이트(블로그, 문서, 마케팅)에 최적.
Astro 프레임워크 가이드 — 콘텐츠 사이트의 최적 선택
콘텐츠 중심 사이트에 최적화된 Astro 프레임워크 가이드. Islands 아키텍처, 제로 JS 기본 출력, React·Vue 통합, 콘텐츠 컬렉션과 Next.js·Remix와의 비교를 포함한다.
한 줄 요약: Astro는 기본적으로 JavaScript를 0바이트 전송하고, 필요한 곳에만 선택적으로 인터랙티브 컴포넌트를 추가하는 콘텐츠 사이트 최적 프레임워크다.
블로그, 문서 사이트, 마케팅 페이지처럼 콘텐츠 중심의 정적 사이트에서 Astro는 Next.js나 Nuxt보다 더 나은 선택이다. Islands Architecture, Content Collections, 뷰 트랜지션의 실전 활용법을 정리한다.
Astro의 철학
Islands Architecture: Astro의 핵심 개념이다. 페이지 대부분은 정적 HTML로 렌더링하고, 인터랙션이 필요한 컴포넌트만 JavaScript 'island'로 분리한다. 검색바, 캐러셀, 다크모드 토글 등 특정 영역에만 client:load 또는 client:visible 디렉티브를 추가하면 해당 부분만 hydrate된다.
Astro Islands 예시--- // src/pages/blog/[slug].astro import Layout from '../../layouts/Layout.astro'; import SearchBar from '../../components/SearchBar.tsx'; import Comments from '../../components/Comments.svelte'; const { Content } = await entry.render(); --- <Layout> <article><Content /></article> <!-- 뷰포트 진입 시에만 로드 --> <SearchBar client:visible /> <!-- 즉시 로드 --> <Comments client:load /> </Layout>
Content Collections: Markdown/MDX 파일을 스키마로 검증하고 타입 안전하게 쿼리할 수 있다. src/content/blog/에 Markdown을 넣고, config.ts에서 Zod 스키마로 frontmatter를 검증하면, 오타나 필수 필드 누락을 빌드 시점에 잡을 수 있다.
React/Vue와 함께 쓰기
Astro의 독특한 점: React, Vue, Svelte 컴포넌트를 동시에 사용할 수 있습니다. 기존 컴포넌트를 재활용하면서 Astro의 성능 이점을 누릴 수 있습니다.
Astro vs Next.js — 언제 무엇을 쓸까
Astro가 유리한 경우: 블로그, 문서 사이트, 포트폴리오, 마케팅 랜딩 페이지 — 콘텐츠가 중심이고 인터랙션이 적은 사이트. Next.js가 유리한 경우: SaaS 대시보드, 이커머스, 소셜 앱 — 인터랙션이 많고 동적 데이터가 핵심인 앱. Astro로 시작하더라도 @astrojs/react로 React 컴포넌트를 사용할 수 있어 확장이 가능하다.
성능 참고: 일반적인 Astro 블로그의 Lighthouse 점수는 100에 가깝다. JavaScript 0바이트 전송이 기본이므로, 별도 최적화 없이도 Core Web Vitals를 충족한다.
astro프레임워크정적사이트콘텐츠islands