Next.js를 제거하자 내 블로그의 모든 Lighthouse 항목이 100점을 기록함

1 week ago 26

정적 블로그의 공개 페이지를 Next.js에서 Hono로 전환한 뒤 Lighthouse 모든 항목에서 100점을 달성함 캐싱과 이미지 최적화를 적용해도 Next.js 클라이언트 런타임이 남았으며, 서버 컴포넌트만 사용하는 실험에서도 점수가 개선되지 않음 전환 후 페이지의 JavaScript가 없어졌고, 미사용 코드는 230,460바이트에서 407바이트로 줄었으며 빌드 시간도 약 40% 감소함 같은 페이지에서 화면 렌더링 전에 실행되는 긴 작업 시간이 309.3ms에서 68.01ms로 줄어 약 78% 개선됨 상호작용이 없는 정적 사이트에는 불필요한 JavaScript를 줄이는 선택이 유효했지만, 상호작용이 많은 앱에는 Next.js가 적합할 수 있으며 이 블로그의 관리 앱도 Next.js를 사용함 직접 블로그를 만든 이유 목표는 가볍고 빠르며 불필요한 기능이 없는 블로그를 만들고, 여러 블로그 운영과 충분한 접근성까지 지원하는 것이었음 기존 서비스는 기능, 성능, 운영 편의성 측면에서 원하는 조건과 맞지 않았음 Medium과 Blogger는 기능이 과도하고 성능도 만족스럽지 않았으며, Markdown/HTML/CSS를 직접 다루기도 번거로웠음 WordPress는 플러그인 관리가 마음에 들지 않았음 Ghost는 직접 호스팅해야 하고 ghost.org의 유료 서비스는 너무 비쌌으며, 버전 업그레이드마다 편집기에 문제가 생겨 유지 관리가 번거로웠음 Hugo가 가장 나았지만 설정 과정이 여전히 번거로웠으며, 원하는 형태는 결국 SaaS에 가까웠음 Bear Blog의 성능과 제품 철학은 마음에 들었지만, 극단적인 미니멀리즘과 편집기 사용성은 맞지 않았음 AdSense 추가와 이미지 첨부를 무료로 지원했다면 그대로 사용했을 수도 있음 직접 개발한 Bloffy는 Bear Blog 수준의 속도에 더 많은 기능과 나은 사용성을 더하는 것을 목표로 함 성능 측정에는 pagespeed.web.dev를 사용함 캐싱과 CDN으로 성능 개선 Next.js 캐싱은 편리하며, ISR과 fetch의 next 캐싱 옵션을 활용하는 것만으로도 성능을 크게 개선할 수 있음 다만 같은 지역에서는 빨라도, 다른 지역 방문자는 여전히 네트워크 지연을 겪음 CDN은 지역 간 지연에 대응하는 수단이며, Vercel에 Next.js 앱을 배포하면 기본 제공됨 Vercel은 편리하지만 Pro 요금제의 초기 비용, 서버리스 콜드 스타트, 생태계 의존성이 부담이었...

Read Entire Article




피플앤툴즈 네트워크
🛍 샵