𝗔𝘀𝘁𝗿𝗼가 내 사이트에 완벽한 PageSpeed 점수를 안겨주었다
처음에는 Astro를 의심했습니다. 저는 React와 Next.js를 사용해 왔으니까요. 그러다 Zimnovate 사이트를 구축했는데, Google PageSpeed에서 만점을 받았습니다.
Astro는 기본적으로 JavaScript를 전혀 전송하지 않습니다. 대부분의 프레임워크는 정적 콘텐츠를 위해 브라우저가 코드를 실행하도록 강제합니다. Astro는 빌드 시점에 컴포넌트를 HTML로 렌더링합니다.
Islands Architecture를 사용합니다. 페이지는 정적인 바다와 같고, 상호작용이 필요한 부분은 섬과 같습니다. 바다는 순수 HTML이며, 오직 섬 부분에서만 JavaScript를 사용합니다.
코드 로드 시점을 제어할 수 있습니다:
- client:visible 사용자가 스크롤할 때 로드됩니다.
- client:load 즉시 로드됩니다.
- client:idle 브라우저가 한가할 때 로드됩니다.
저는 Astro 4.x, Tailwind CSS, 그리고 Supabase를 사용했습니다. Supabase는 블로그 포스트를 저장하고, Astro는 빌드 중에 이 데이터를 가져옵니다. 사용자는 캐싱된 HTML을 받게 되며, 이는 즉각적입니다.
이는 SEO에 도움이 됩니다. 검색 봇이 HTML을 즉시 볼 수 있습니다. JavaScript를 기다릴 필요가 없습니다.
하나의 프로젝트에서 React, Vue 또는 Svelte를 사용할 수 있습니다. 기존 기술을 유지하면서 더 빠른 속도를 얻을 수 있습니다.
Astro를 사용하기 좋은 경우:
- 에이전시 사이트
- 랜딩 페이지
- CMS 블로그
- 포트폴리오
Astro를 피해야 하는 경우:
- 대시보드
- 실시간 앱
웹은 비대해지고 있습니다. Astro는 이를 해결합니다. 성능을 최우선으로 합니다.
Optional learning community: https://t.me/GyaanSetuAi