1분 소요

Astro로 블로그 만들기

Next.js에서 Astro로 전환하며 배운 것들

astro blog 개발일지

왜 Astro인가?

기존에 Next.js로 운영하던 사이트를 Astro로 전환했습니다.

전환 이유

  1. 콘텐츠 중심: 블로그에 최적화된 프레임워크
  2. 빠른 빌드: 정적 사이트 생성에 특화
  3. 유연한 통합: React, Vue 등 원하는 프레임워크 사용 가능
  4. MDX 지원: 마크다운에 컴포넌트 삽입

기술 스택

- Astro 5
- Tailwind CSS
- React (Islands)
- MDX
- GitHub Pages

구조 설계

src/
├── content/
│   └── blog/          # MDX 블로그 포스트
├── pages/
│   ├── index.astro    # 홈
│   ├── blog/          # 블로그 목록/상세
│   └── projects/      # 프로젝트들
├── components/        # 재사용 컴포넌트
└── layouts/           # 레이아웃

Islands Architecture

Astro의 핵심 개념인 Islands Architecture:

  • 페이지 대부분은 정적 HTML
  • 인터랙티브한 부분만 JavaScript 로드
  • client:load, client:visible 등으로 제어

예시:

<!-- 정적 컨텐츠 -->
<h1>제목</h1>
<p>본문...</p>

<!-- 인터랙티브 컴포넌트 (React) -->
<Roulette client:load />

결과

  • ✅ 빌드 시간 단축
  • ✅ 번들 크기 감소
  • ✅ 블로그 작성 편의성 향상
  • ✅ 기존 React 컴포넌트 재사용

다음에는 SEO 최적화에 대해 다뤄볼게요!