Next.js 걷어내고 Lighthouse 전 항목 100점 찍은 개인 블로그

요즘 블로그 만들 때 정적 사이트 생성기 뭐가 좋은지 궁금하네. 다들 뭐 씀?

Astro 씀. 원하는 만큼 확장되고 나중에 인터랙티브한 게 필요하면 react나 svelte 붙이면 그대로 돌아감. 성능도 최상이고 제일 단순한 블로그부터 복잡한 콘텐츠 사이트까지 다 됨.

AI한테 네가 쓰는 언어랑 템플릿, 구조를 주고 생성기 자체를 짜달라고 해봐. 어지간히 단순한 건 한 방에 뽑아줌. 페이지를 생성하는 데 쓰라는 말이 아니라 생성기를 쓰라는 거임.

Hugo 하나 Zola 하나씩 굴리는데 구조만 이해하면 둘 다 단순함. Astro도 좋은데 JS 생태계를 그대로 쓰고 싶을 때 특히.

Astro는 반대임. 서버 아일랜드니 뭐니 블로그엔 과한 설계고, 그렇다고 복잡한 사이트용으로 만든 것도 아님. 요즘은 프레임워크 필요 없어서 Hono에 Tanstack router로 백엔드랑 라우터만 깔고 LLM한테 시키면 한두 시간이면 정적 사이트 나옴.

Hugo 씀. 단순하고 문서도 좋고 LLM도 잘 이해함. 예전엔 Node 기반 SSG를 썼는데 업데이트마다 깨지고 의존성이 백 개였음.

Zola 쓰는데 단일 바이너리라 새 기능이 필요할 때만 업데이트하면 됨. 근데 결국 다들 자기만의 SSG 만든 글 세 개쯤 쓰고 그 블로그를 잊어버리는 게 전통임.

미니파이도 안 한 HTML에 바닐라 JS로 CRUD 앱 만들었는데 다른 사이트보다 훨씬 빨랐음.

그건 뻔한 얘기임. 궁금한 건 그 속도를 유지하면서 개발 경험도 좋게 하는 방법이고, 그건 AI가 대충 해결해줌. 프레임워크 없이 바닐라 페이지를 바로바로 고쳐주니까.

회사에서 Next.js 쓰는데 싫음. 뷰 하나를 왜 두 번 써야 하는지 모르겠음. 우리가 잘못 쓰는 걸 수도 있는데 지금 도구로는 그냥 프로파일링해서 SSR이 필요 없게 만드는 게 맞다고 봄.

Next.js 버리고 Tanstack Start로 가봐. SPA의 좋은 점은 유지하고 SSR은 필요할 때만 골라 쓰면 됨.

페이지를 충분히 빨리 만들 수 있으면 캐싱은 필수가 아님. 거리 때문에 CDN이 필요한 경우는 별개고.

배포 시점에 includes로 미리 컴파일한 정적 사이트로 큰 사이트들을 SEO에서 이기고 있음.

Hugo로 Github Pages에 올리는데 성능은 생각도 안 해봄. 방금 재보니 100임. 정적 HTML은 문제 카테고리 하나가 통째로 사라짐.

회사 사이트를 WordPress에서 Hugo로 옮겼는데 브랜드랑 스타일 가이드가 새로 나와서 Claude로 포팅했더니 금방 끝났고 CDN 없이도 구글 속도 순위 잘 나옴.

Hugo인데 이미지 큰 페이지 있으면 Pipes로 srcset 사다리 자동 생성하면 됨. 편함.