Astro는 2022년 8월에 출시된 자바스크립트 웹 프레임워크로, '아일랜드 아키텍처'를 기반으로 합니다. Astro는 콘텐츠가 중심이 되는 정적 웹사이트를 효율적으로 구축하고자 하는 유용한데요. Astro의 설계 철학은 불필요한 복잡성을 최소화하여 웹 개발의 단순성을 되찾는 것에 중점을 두고 있습니다.

쉽게 말하면 성능이 아주 빠르고 쉽게 제작이 가능한 MPA, SSG 프레임워크 입니다.

아일랜드 아키텍처의

Astro의 아일랜드 아키텍처는 웹 페이지를 독립적이고 대체 가능한 컴포넌트들의 집합으로 바라보는 접근 방식입니다. 이는 전체 페이지가 아닌 필요한 부분에서만 동적 기능을 활성화함으로써 초기 로드 시 순수 HTML로 구성된 정적 콘텐츠를 제공합니다. 결과적으로, 각 '섬'이라 불리는 컴포넌트는 필요에 따라 나중에 혹은 다양한 방식으로 지연 로딩(Lazy)될 수 있으며, 이는 전반적인 페이지 성능을 향상시키는 핵심 요소입니다.

이런 유연성 덕분에 React, Vue, Svelte 등 다양한 프론트엔드 프레임워크와의 호환성을 자랑하며, 이들을 하나의 프로젝트 내에서 혼합하여 사용할 수 있는 유연성을 제공합니다. 이는 개발자가 각각의 상황에 가장 적합한 도구를 선택할 수 있게 하여 생산성과 효율성을 극대화합니다

최적화된 성능

Astro는 '서버 우선 접근 방식'을 채택하여 꼭 필요한 경우에만 클라이언트 측 렌더링을 수행합니다. 이로 인해 전통적인 SPA(Single Page Application)에 비해 페이지의 로딩 시간이 단축됩니다. Astro의 'Island Optimization' 기술은 페이지 로드 성능을 크게 향상시켜, 심지어 Next.js와 같은 프레임워크보다 우수한 성능을 제공합니다. 전통적인 방식의 SPA는 JS전체를 로드한후 Ajax로 불러오는 방식이라면 아일랜드 아키텍처는 HTML이 정적으로 서빙되고 추가적으로 필요한 JS를 불러옵니다. 각각의 필요한 컴포넌트 로딩이 완전히 독립적이어서 보고 있지 않은 컴포넌트는 Lazy하게 로딩하여 waterfall이 줄어들어 로딩속도가 빠릅니다.

사용 사례

Astro는 콘텐츠 중심의 정적 웹사이트 구축에 최적화되어 있으며, 빠른 로딩 속도와 뛰어난 SEO 를 요구하는 프로젝트에 특히 적합합니다. Microsoft의 Fluent Design System 홈페이지가 Astro를 사용한 대표적인 예시로, Vercel 등의 주요 기술 기업들의 지원을 받으며 그 가능성을 인정받고 있습니다.

따라서 Astro는 콘텐츠 중심의 웹사이트, 블로그, 포트폴리오와 같이 SEO와 로딩 속도가 중요한 프로젝트에 적합합니다. 또한 다양한 프론트엔드 기술 스택을 사용해야 하는 복잡한 웹 애플리케이션 개발에도 탁월한 선택지가 될 수 있습니다. 그러나, 동적인 화면 변화가 잦거나 SSR(Server-Side Rendering)을 적극적으로 활용해야 한다면 Next.js와 같은 프레임워크가 더 적합할 것 같습니다.

https://astro.build/