Next.js 걷어내니 라이트하우스 만점
원제 Removing Next.js Got My Blog to 100 on Every Lighthouse Category
131 포인트댓글 70
Key Point
Next.js와 같은 현대 프레임워크가 정적 블로그처럼 상호작용이 거의 없는 사이트에서 성능을 해칠 수 있다는 구체적인 증거와, 만점을 위해 어떤 선택이 필요했는지 보여준다.
핵심 요약
- 블로그가 라이트하우스 전 카테고리에서 100점을 받았는데, Next.js를 제거하는 과정이 필수였다.
- 기존 선택지들(Medium, Blogger, Ghost, WordPress, Hugo)을 검토했으나 성능과 편의성 면에서 부족했고, Bear Blog를 영감 삼아 더 많은 기능을 갖춘 블로그를 직접 구축하기로 결심했다.
- 정적 웹사이트에 CDN 캐싱과 이미지 최적화만으로도 충분하다고 판단해 Cloudflare를 도입했으며, 특히 Cloudflare의 Image Transformations 무료 티어(5,000개)를 활용했다.
- Next.js 16.1.6로 구축한 후 측정 결과 높은 점수를 받았지만 만점이 아니었고, 원인을 분석하니 정적 페이지임에도 프레임워크 런타임이 JavaScript 번들에 남아있었다.
- 서버 컴포넌트만 사용해도 다음/링크와 다음/이미지 같은 클라이언트 컴포넌트 때문에 런타임, 하이드레이션, RSC 페이로드가 유지되었고, 이를 완전히 제거할 공식 방법이 없었다.
- 정적 사이트에는 JavaScript가 불필요한데 사용하지 않는 코드만 230KB에 달했으므로, Next.js를 제거해야 만점을 달성할 수 있다고 판단했다.
- Hono(빠르고 간단한 철학, JSX 지원)로 마이그레이션하여 최종적으로 라이트하우스 전 카테고리 100점과 JavaScript 407바이트, 빌드 시간 40% 단축을 달성했다.
- Next.js의 첫 번째 렌더링 전 장시간 작업(long task)은 309.3ms였지만 Hono에서는 68.01ms로 약 78% 개선되었다.
- 저자는 정적 사이트에는 대체로 Next.js가 불필요하지만, 상호작용이 많은 앱에는 유용하며 자신의 블로그 관리 앱은 여전히 Next.js를 사용 중이라고 강조했다.