이 사이트를 Astro로 다시 지은 이유

무거운 SPA를 걷어내고 정적 우선으로. 다크 우선 테마, FOUC 없는 부팅, 그리고 바닐라 JS만으로 충분했던 인터랙션.

Astro웹성능

이 사이트는 한때 필요 이상으로 무거웠다. 한 사람이 운영하는 포트폴리오에 풀 SPA는 과했다. 그래서 정적 우선으로 다시 지었다.

왜 Astro인가

대부분의 페이지는 그냥 정적 HTML이면 된다.
인터랙션(테마 토글, 언어 전환)은 작은 바닐라 JS로 충분하다.
필요할 때만 React 아일랜드를 끼워 넣을 여지를 남겨둔다.

FOUC 없는 다크 우선

테마 클래스를 <html>에 스타일시트가 로드되기 전에 인라인 스크립트로 칠한다. 깜빡임이 사라진다.

<script is:inline>
  (function () {
    var saved = localStorage.getItem('mode') || 'dark-mode';
    document.documentElement.classList.add(saved);
  })();
</script>

결과

번들은 가벼워졌고, 빌드는 정적 파일을 뱉는다. 한 사람이 유지하기에 딱 좋은 무게가 됐다. 그리고 지금 읽고 있는 이 블로그도, 마크다운 파일 하나를 추가하면 글이 올라가는 구조다.

Back to blog