Astro로 첫 정적 웹사이트 배포하기 | Tutorials

왜 Astro인가?

대다수 현대 웹 프레임워크는 인터랙션이 거의 없는 페이지라 할지라도 무거운 자바스크립트 번들을 클라이언트에 전송합니다. Astro는 이 방식을 근본적으로 뒤집습니다: 기본적으로 순수한 제로-JS 정적 HTML을 생성하며, 필요한 컴포넌트만 ’아일랜드(Island)’로 격리하여 점진적으로 하이드레이션합니다.

핵심 개념: 아일랜드 아키텍처

---
import Header from "../components/Header.astro";
import InteractiveCounter from "../components/Counter.jsx";
---

<Header />
<main>
  <h1>안녕하세요, Astro!</h1>
  <InteractiveCounter client:visible />
</main>

Header는 100% 정적 HTML로 렌더링되며, InteractiveCounter는 화면에 스크롤되어 보일 때만 비동기적으로 React 스크립트를 로드합니다.