Astro는 정적 웹사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 모두 지원하는 최신 웹 프레임워크로, 빠른 로딩 속도와 성능 최적화를 제공합니다. 본 글에서는 Astro를 활용하여 초고속 정적 웹사이트를 구축하는 방법과 SSG, SSR의 차이점을 살펴보겠습니다.
1. Astro란?
Astro는 컴포넌트 기반의 웹 프레임워크로, React, Vue, Svelte 등의 다양한 UI 라이브러리와 함께 사용할 수 있습니다. 특히 불필요한 자바스크립트 로딩을 줄이고, 정적 HTML을 생성하여 빠른 웹사이트 퍼포먼스를 보장합니다.
✅ Astro의 주요 특징
- Partial Hydration: 필요한 부분만 클라이언트에서 실행하여 성능 최적화
- 멀티 프레임워크 지원: React, Vue, Svelte, Solid.js 등과 함께 사용 가능
- 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR) 지원
- CDN 기반 배포 가능: Netlify, Vercel, GitHub Pages 등과 쉽게 연동
2. 정적 웹사이트 생성(SSG) vs 서버 사이드 렌더링(SSR)
Astro는 두 가지 렌더링 방식인 **SSG(Static Site Generation)**과 **SSR(Server-Side Rendering)**을 모두 지원합니다.
| 렌더링 방식 | 특징 | 장점 | 단점 |
|---|---|---|---|
| SSG | 빌드 시 HTML 파일을 생성하여 배포 | 빠른 로딩 속도, SEO 최적화, 트래픽 부담 낮음 | 동적 데이터 처리 어려움 |
| SSR | 요청 시마다 서버에서 HTML을 생성하여 반환 | 최신 데이터 반영 가능, API 연동 용이 | 서버 부담 증가, 로딩 속도 느림 |
✅ Astro는 기본적으로 SSG를 사용하며, SSR이 필요한 페이지에 한해 옵션을 활성화할 수 있습니다.
3. Astro를 활용한 정적 웹사이트 구축
📌 Astro 프로젝트 생성하기
Astro는 npm 또는 pnpm을 사용하여 간단하게 프로젝트를 생성할 수 있습니다.
npm create astro@latest my-astro-site cd my-astro-site npm install
설치 후 Astro 프로젝트를 실행하려면 다음 명령어를 입력합니다.
npm run dev
➡ 기본적인 정적 사이트가 실행되며, src/pages 디렉터리에 HTML 기반의 Astro 파일을 추가할 수 있습니다.
4. SSG와 SSR 적용 방법
📌 정적 웹사이트 생성(SSG) 기본 설정
Astro는 기본적으로 모든 페이지를 정적으로 생성합니다. src/pages/index.astro 파일을 생성하면 자동으로 HTML이 빌드됩니다.
---
const title = "Astro를 활용한 초고속 웹 퍼블리싱";
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<p>Astro를 활용하면 빠른 정적 사이트를 만들 수 있습니다.</p>
</body>
</html>
✅ 위 코드를 빌드하면 HTML 파일이 생성되며, 자바스크립트 없이 정적인 웹페이지가 제공됩니다.
📌 SSR이 필요한 경우 설정하기
SSR을 활성화하려면 astro.config.mjs 파일에서 SSR 모드를 설정해야 합니다.
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'server' // SSR 활성화
});
이후 pages 디렉터리에서 특정 페이지를 SSR로 렌더링할 수 있습니다.
---
export async function getServerSideProps() {
const res = await fetch('<https://jsonplaceholder.typicode.com/posts>');
const posts = await res.json();
return { props: { posts } };
}
---
<html>
<body>
<h1>실시간 데이터 가져오기</h1>
<ul>
{posts.map(post => (
<li>{post.title}</li>
))}
</ul>
</body>
</html>
✅ SSR은 API 데이터를 요청 시마다 새로 받아올 때 유용하지만, 정적 페이지보다 속도가 느릴 수 있습니다.
5. Astro의 퍼포먼스 최적화 전략
📌 불필요한 자바스크립트 제거하기
Astro는 기본적으로 정적인 HTML을 생성하여 성능을 극대화하지만, 일부 컴포넌트에 자바스크립트가 필요할 수 있습니다.
다음과 같이 client:load 옵션을 추가하면 해당 컴포넌트만 클라이언트에서 실행됩니다.
--- import MyComponent from '../components/MyComponent.astro'; --- <MyComponent client:load />
✅ Partial Hydration을 활용하면, 최소한의 자바스크립트만 로드하여 웹사이트 속도를 높일 수 있습니다.
📌 이미지 최적화
Astro의 @astro/image 패키지를 활용하면 이미지 최적화를 자동화할 수 있습니다.
설치 후 astro.config.mjs에 추가합니다.
npm install @astro/image
이후 Astro 컴포넌트에서 최적화된 이미지를 사용할 수 있습니다.
import { Image } from '@astro/image';
<Image src="/image.jpg" alt="최적화된 이미지" width={600} height={400} />
✅ WebP 변환, 크기 조정 등을 자동으로 적용하여 이미지 로딩 속도를 향상시킵니다.
결론: Astro를 활용한 초고속 웹 퍼블리싱 전략
✅ SSG(정적 사이트 생성)를 활용하면 SEO 최적화 및 빠른 로딩 속도를 제공
✅ SSR(서버 사이드 렌더링)을 필요에 따라 적용하여 최신 데이터 반영
✅ Partial Hydration을 사용하여 불필요한 자바스크립트 로딩 방지
✅ 이미지 최적화 및 경량화로 웹사이트 성능 극대화
Astro는 정적 웹사이트 퍼블리싱에 최적화된 최신 프레임워크로, 빠른 속도와 확장성을 제공합니다. SSG와 SSR을 적절히 활용하여 최적의 퍼블리싱 전략을 세운다면, 가볍고 SEO 친화적인 웹사이트를 쉽게 구축할 수 있습니다. 🚀
