Next.js 버리고 Astro로 갈아탄 개발자의 이야기
Next.js 기반 포트폴리오 사이트를 구축했으나, 블로그 운영에 과도한 자바스크립트(JavaScript) 번들(Bundle) 문제 발생
Astro로 전환하여 제로 자바스크립트(Zero JavaScript)를 지향하며, 빌드 타임(Build Time)에 HTML을 생성하여 페이지 로딩 속도(Page Loading Speed) 향상을 달성
Astro의 내장된 콘텐츠 컬렉션(Content Collections), Shiki 기반 구문 강조(Syntax Highlighting), View Transitions API 지원으로 개발 편의성 증대
Next.js 대비 Astro의 의존성 감소(Dependency Reduction), 빌드 시간 단축(Build Time Reduction), 성능 향상(Performance Improvement)을 확인
Astro의 제로 자바스크립트(Zero JavaScript) 아키텍처
Astro는 기본적으로 서버 사이드 렌더링(Server-Side Rendering, SSR)을 통해 HTML을 생성하고, 필요한 경우에만 부분적 수화(Partial Hydration)를 수행한다. 이는 Next.js와 달리 모든 페이지를 클라이언트에서 렌더링하는 방식과 대비된다.
빌드 타임(Build Time) HTML 생성: Astro는 빌드 과정에서 정적 HTML을 생성하여 초기 로딩 속도(Initial Loading Speed)를 극대화한다.
아일랜드 아키텍처(Islands Architecture): 인터랙티브(Interactive)한 컴포넌트만 선택적으로 수화하여 불필요한 자바스크립트 실행을 방지한다.
View Transitions API 지원: 페이지 전환 시 부드러운 애니메이션을 제공하며, 추가적인 자바스크립트 라이브러리(JavaScript Library) 없이 사용자 경험(User Experience)을 향상시킨다. 이러한 아키텍처는 블로그와 같이 정적인 콘텐츠가 많은 웹사이트에 특히 유용하다.
Next.js와 Astro의 의존성(Dependency) 비교
Next.js는 React, Framer Motion, GSAP 등 다양한 라이브러리를 사용하며, 블로그 콘텐츠를 위해 여러 개의 추가 패키지를 설치해야 한다. 반면, Astro는 내장된 기능(Built-in Feature)을 통해 더 적은 의존성으로 동일한 기능을 구현한다.
Next.js 의존성: react-markdown, remark-gfm, rehype 등 다수의 마크다운(Markdown) 관련 패키지 필요
Astro 의존성: content collections, Shiki, View Transitions API 등 내장 기능으로 대체
결과: Next.js는 30개 이상의 의존성을 가지는 반면, Astro는 10개 내외로 프로젝트 복잡성(Project Complexity)을 감소시킨다. 의존성 감소는 빌드 시간 단축 및 유지보수 용이성(Maintainability)을 높이는 데 기여한다.
Astro의 콘텐츠 컬렉션(Content Collections)과 Shiki
Astro는 콘텐츠 컬렉션을 통해 마크다운(Markdown) 파일 관리를 간소화하고, Shiki를 사용하여 코드 블록(Code Block)에 구문 강조(Syntax Highlighting)를 제공한다.
콘텐츠 컬렉션: 스키마(Schema) 정의를 통해 타입 안정성(Type Safety)을 확보하고, 데이터 관리 효율성을 높인다.
Shiki: 별도의 플러그인 설치 없이 다양한 테마(Theme)를 지원하며, 코드 블록에 대한 자동 구문 강조(Automatic Syntax Highlighting)를 제공한다.
Next.js와의 차이: Next.js에서는 별도의 패키지를 설치하고 설정을 구성해야 하는 반면, Astro는 설정 없이 바로 사용 가능하다. 이러한 기능들은 개발 생산성(Development Productivity)을 향상시킨다.
Astro의 성능(Performance) 벤치마크
본문에 따르면 Astro는 Next.js에 비해 더 빠른 빌드 시간(Build Time)과 더 적은 자바스크립트 번들(JavaScript Bundle)을 제공하여 페이지 로딩 속도(Page Loading Speed)를 향상시킨다.
자바스크립트 번들 크기: Next.js는 약 230KB의 자바스크립트를 로드하는 반면, Astro는 블로그 페이지에서 0KB의 자바스크립트를 로드한다.
빌드 시간: Next.js는 약 15초가 소요되는 반면, Astro는 약 5초로 빌드 시간 3배 단축
Lighthouse 성능 점수: Astro는 99-100점, Next.js는 85-90점으로 Astro가 더 높은 성능 점수를 기록
이러한 성능 개선은 사용자 경험(User Experience) 향상과 검색 엔진 최적화(SEO)에 긍정적인 영향을 미친다.
