Astro는 2021년 등장한 콘텐츠 중심 웹 프레임워크다. "Islands Architecture"를 통해 정적 HTML을 기본으로 제공하고, 인터랙티브한 부분만 선택적으로 하이드레이션해 뛰어난 성능을 달성한다.
핵심 철학: Islands Architecture
전통적 SSR/SPA: 전체 페이지가 JS로 렌더링
Astro Islands: 정적 HTML + 필요한 곳만 JS 아일랜드
기본 컴포넌트 (.astro)
astro
---
// 빌드 시 실행되는 서버 코드 (프런트매터)
const title = 'Astro 블로그';
const posts = await fetchPosts(); // 빌드 타임 데이터 패칭
---
<html lang="ko">
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<ul>
{posts.map(post => (
<li><a href={'/posts/' + post.slug}>{post.title}</a></li>
))}
</ul>
</body>
</html>
프레임워크 통합 (React, Vue, Svelte 혼용)
astro
---
import ReactCounter from './Counter.jsx';
import VueWidget from './Widget.vue';
---
<!-- client:load: 즉시 하이드레이션 -->
<ReactCounter client:load />
<!-- client:idle: 브라우저 유휴 시 하이드레이션 -->
<VueWidget client:idle />
<!-- client:visible: 뷰포트 진입 시 하이드레이션 -->
<HeavyComponent client:visible />
<!-- client:only: SSR 없이 클라이언트만 -->
<AdminPanel client:only="react" />
콘텐츠 컬렉션
typescript
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()),
}),
});
export const collections = { blog };
Astro vs Next.js
| 항목 | Astro | Next.js |
|---|
| 목적 | 콘텐츠/정적 사이트 | 동적 웹 앱 |
| 기본 출력 | 정적 HTML | SSR/SSG |
| JS 전송 | 최소화 | 전체 번들 |
| 프레임워크 | 중립 (혼용 가능) | React 전용 |
관련 개념
