Astro 란 무엇인가? (블로그 이전 프로젝트 - 2)
목적
블로그 이전을 위해, Next.js 와 React Router v7 과 Astro 를 놓고 고민하다 Astro 를 선택하기로 함.
Astro..? 검색하면 차은우 그룹이라는 내용만 나오는데요?
나도 처음엔 그랬다. astro 프레임워크 라고 검색하니 그제서야 나왔다.
이제는 astro 라고 검색해도 바로 상단에 노출이 되지만, 여전히 아이돌 그룹이 최상단을 차지하고 있다.
블로그를 옮기면서 꼭 유지하고 싶었던 것들
블로그를 개편하기로 하면서, 꼭 유지하고 싶은 것이 꼭 하나 있었다.
지금 처럼, github 에 게시글 파일을 함께 보관하고 관리하는 것이다.
굳이 백엔드까지 내가 관리하고 싶지 않았다. Supabase 를 사용하면 될지도 모르나, 그럼 결국 신경써야할 것이 늘어나기 때문이다.
게다가 마크다운 형식이 마음에 들기도 하고, 글을 작성하거나 수정할 때 VSCode 나 Obsidian 을 사용하는 게 더 편리했다.
그래서 애초에 티스토리, 벨로그 등은 크게 고려하지 않고 있었기도 했다.
일단 github 로 파일 관리를 하기로 마음을 먹었으니, 배포할 때도 github 와 연동이 가능해야했다.
간편하게 이를 지원해주는 PasS 제품들(Netlify, Vercel, Cloudflare Pages, Github Pages)이 있었다.
여기에서도 고민을 했는데, Github Pages 를 그대로 이용하고 싶었다.
Github Actions 을 통해 내가 배포 관리도 해볼 수 있고, 내 카드를 등록하지 않아도 되니, 결제 위험에서 조금은 벗어날 수 있지 않을까 싶었다.
사용량 조금 넘으면 돈 조금 내면 되지 않겠냐 싶지만서도, 예전에 개발 과정에서 이미 돈을 내본 경험이 있기 때문에… 굳이 그럴 이유는 없다고 봤다.
그래서 왜 쓰는 건가요?
아무튼, 배포 플랫폼 까지 Github 로 결정하고 난 뒤 처음엔 Next.js 나 React Router v7 를 프레임워크로 사용해서 SSR 을 적용하려고 했다.
Astro 는 아예 모르고 있었다.
그런데, 생각해보니 Github pages 는 어디까지나 정적 사이트를 제공해주는 것이다.
서버가 별도로 존재하지 않아서, 이미 만들어져있는 HTML 을 그대로 보여주는 것이다.
SSR 은 불가능하다는 말이다. SSG 를 이용하거나, React 를 기반으로 SPA 로 만드는 수밖에 없다.
SPA 로 만들어주면, HTML 파일이 브라우저에서 렌더링 된 후 JS 파일은 불러올 수 있기 때문에 사용할 수 있다.
하지만, 내 블로그는 SSG 여도 상관이 없었고 SEO 를 조금 더 신경쓰고 싶었다.
그래서 그냥 HTML 파일로 만들어서 관리를 해야하나 고민을 하던 찰나.. 발견하게 된게, Astro 다.
- 마크다운을 기본으로 지원
- React / Vue / Svelte 같은 것들을 사용하더라도 정적 페이지를 만들 수 있음
- React 기반으로 만든 페이지보다 90% 만큼 JS 를 적게쓰고, 40% 나 빠른 속도를 낸다고 한다.
말로만 들어보면 정말 내게 딱 맞는 것처럼 보였다.
어차피 개인 프로젝트이니, 새로운 경험을 해보자 싶어서 결정했다.
그래서, 계획을 조금 수정하게 됐다. Astro 는 아일랜드 아키텍쳐를 사용하고 있는데, 한 번 알아볼 필요도 있고 튜토리얼도 해볼 필요가 있다.
다음엔 Astro 를 다뤄보도록 하자.
세줄 요약
- Github 에 .md 파일을 두고 관리하고 Github Pages 로 배포하고 싶었다.
- 이런 요구 사항으로는 SSR 은 사용이 불가능하고, SSG 를 활용해야했다.
- React 를 활용하면서도, SSG 생성이 가능한 Astro 를 이용하기로 했다.