Astro.js란 무엇인가?

아스트로_비주얼.jpg

시작하며

프론트엔드 생태계는 빠르게 변한다. 새로운 프레임워크와 라이브러리가 계속 등장하는 가운데, 기술 블로그 개발을 위해 스택을 탐색하던 중 성능 최적화와 콘텐츠 중심 웹사이트에 강점을 가진 라이브러리를 알게 되었다.

바로 최근 큰 인기를 끌고 있는 Astro.js (일명 Astro) 웹 프레임워크이다. 이번 글에서는 Astro가 무엇인지, 그리고 어떤 이점을 가져다 줄 수 있는지에 대해 작성해보겠다.

Astro.js 를 알아보자

Astro.js 는 블로그, 문서 사이트, 마케팅 페이지처럼 콘텐츠 중심의 웹사이트를 만들기 위해 설계된 웹 프레임워크다.

공식 홈페이지에서는 Astro를 아래와 같이 소개한다.

“The web framework for content-driven websites”

Astro란 무엇인가 ?

최근 점점 복잡해지는 웹 프론트엔드 트렌드 속, Astro는 블로그, 마케팅 웹사이트, 쇼핑몰 등 콘텐츠 중심의 웹사이트를 구축하기 위해 설계된 올인원 웹 프레임워크이다.

Astro는 이러한 문제를 해결하기 위해 등장했다. 기본적으로 정적인 HTML을 우선 생성하고, 정말 필요한 부분에만 JavaScript를 사용하는 방식으로 성능 최적화에 집중한다.

아스트로_성능지표.png

Core Web Vitals 성능 지표 (출처 https://astro.build)

Astro의 핵심 개념

Astro는 6가지 핵심 개념을 가지고 있다.

기본적으로 Zero JS: 사이트의 속도를 느리게 만드는 클라이언트 측 Javascript를 줄임
Island 아키텍처: 콘텐츠 중심 웹사이트에 최적화된 컴포넌트 기반 웹 아키텍처
UI에 구애받지 않음: React, Vue, Svelte, Solid 등을 지원
서버 우선: 방문자의 장치에서 값비싼 렌더링을 제거 함
콘텐츠 컬렉션: Markdown 콘텐츠에 대한 TypeScript 타입 안전성을 구성, 검증 및 제공
사용자 정의 가능: Tailwind, MDX 등 수백 가지 통합을 제공

이어 Astro의 핵심 개념들 중 몇가지를 서술해보도록 하겠다.

개념 1. 기본적으로 Zero JS

TTI_설명.svg

(출처 https://web.dev)

TTI는 사용자가 페이지를 완전히 사용할 할 수 있게 되는 데 걸리는 시간을 측정하는 웹 성능지표이다.

Astro의 Zero JS 개념은 “요청된 자바스크립트만 제공”해 브라우저에 로드 되는 자바스크립트를 최소화하여 TTI를 크게 개선하는 개념이다. Astro에서는 이를 위해 Astro 컴포넌트 를 사용하게 된다. 이는 클라이언트 측 런타임이 없는 HTML 전용 템플릿 컴포넌트로, .astro 파일 확장자를 사용한다.

Astro 컴포넌트

Astro 컴포넌트는 컴포넌트 스크립트 와 컴포넌트 템플릿 이라는 두가지 부분으로 구성된다.

컴포넌트 스크립트 는 코드 펜스 (---)를 사용하여 컴포넌트 스크립트를 식별한다. 이는 Markdown의 프론트매터 개념과 유사하다. 컴포넌트 스크립트 영역에는 템플릿을 렌더링하는 데 필요한 Javascript 코드를 작성할 수 있다.

컴포넌트 템플릿 에는 페이지에 렌더링 될 일반 HTML과 JS 표현식을 작성할 할 수 있다.

---
// 컴포넌트 스크립트 (JavaScript)
import Header from '@ui/components/Button.astro';
import Button from '@ui/components/Button.jsx';

const fooDatas = await fetch('https://api.coldbrow.me/foo').then((res) => res.json());
---

<!-- 컴포넌트 템플릿 (HTML + JS 표현식) -->
<Header />

<ul>
  {fooDatas.map((data) => <li>{data.name}</li>)}
</ul>

<Button client:load>버튼!</Button>

빌드 이후에 Astro컴포넌트의 Javascript는 모두 제거 되고 결과물은 아래와 같다.

<header>
  <!-- Header 컴포넌트의 정적 내용 -->
</header>

<ul>
  <li>데이터1</li>
  <li>데이터2</li>
  <li>데이터3</li>
</ul>

<div>
  <button>버튼!</button>
</div>

최종적으로 사용자는 불필요한 JavaScript 실행 없이 더 빠르게 콘텐츠를 확인할 수 있게 된다.

개념 2. Islands 아키텍처

Island_아키텍처.png

(출처 Islands Architecture: Jason Miller)

Islands 아키텍처는 페이지 전체를 클라이언트에서 렌더링하는 대신, 상호작용이 필요한 부분만 독립적으로 동작하도록 만드는 선택적 수화를 제공하는 방식이다.

Astro는 이러한 Islands 아키텍처를 구현한 프레임워크로, Astro에서 “Islands”란, 페이지의 대화형 UI 컴포넌트를 의미한다. 쉽게 말하자면, 먼저 사용자와의 상호작용이 필요 없는 UI를 정적 HTML로 생성한 다. 이후에 마치 섬을 띄우는 것처럼 상호작용이 필요한 UI만 Javascript를 로드하는 방식으로 동작하는 것이다.

Islands 생성

기본적으로 Astro는 UI 컴포넌트의 모든 클라이언트 측 JavaScript를 제거하고 HTML 및 CSS로 렌더링한다고 했다. 그렇다면 Island (상호작용이 필요한 UI 컴포넌트)는 어떻게 생성할까?

정적 UI 컴포넌트를 Island 바꾸려면 client:\* 클라이언트 지시어만 있으면 된다. 그러면 Astro는 클라이언트 측 JavaScript를 자동으로 빌드하고 번들링하게 된다.

<Button client:visible />
<MyReactComponent client:load />

Islands 의 이점

웹 사이트의 대부분은 빠르고 정적인 HTML로 제공 되며, 일부 Javascript가 필요한 개별 컴포넌트만 Hydration 과정을 통해 로드 되어 웹 사이트 성능을 크게 개선할 수 있게 된다.
한 페이지 내의 각 Islands는 병력적으로 로드 되어, 무겁고 느린 일부 Island가 로드 되는 것을 기다리지 않아도, 먼저 로드 되는 Islands와 상호작용 할 수 있다.

개념 3. UI Zero Lock-in

Astro는 특정 UI 프레임워크를 강제하지 않는다.

React, Vue, Svelte, Solid 등 다양한 프레임워크를 함께 사용할 수 있다.

---
import ReactButton from '@components/ReactButton.jsx';
import VueButton from '@components/VueButton.vue';
import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';

const product = await getProductDetails(Astro.params.slug);
---

<ProductPageLayout>
  <img src={product.imageUrl} alt={product.imageAlt} />
  <h2>{product.name}</h2>
  <ReactButton id={product.id} client:load />
  <VueButton id={product.id} client:load />
</ProductPageLayout>