저자는 최근 138개의 브라우저 내 웹 유틸리티 모음인 ToolHub 구축에 대한 전체 아키텍처 회고록을 출판했습니다. 이 모음은 깔끔함, 개인 정보 보호, 제로 블로트를 우선시합니다. 이 사이트는 초당 미만의 속도와 완전한 오프라인 기능을 갖도록 설계되었으며, 이러한 기능을 가능하게 하는 주요 엔지니어링 트레이드오프와 기술적 결정이 포함되어 있습니다. 주요 아키텍처 하이라이트 중 하나는 Next.js Static Export의 사용으로, 엣지 CDN에 호스팅되는 100% 정적 내보내기 모델을 가능하게 하여 서버 유지보수가 제로이고 첫 바이트까지의 시간이 매우 짧습니다. 이 접근 방식은 무한한 확장성도 가능하게 하지만, 모든 동적 콘텐츠가 브라우저 메모리에서 엄격하게 클라이언트 측에서 실행되어야 합니다. 저자는 또한 맞춤형 Service Worker 캐싱 전략을 구현했으며, 여기에는 정적 자산에 대한 stale-while-revalidate와 HTML 문서 탐색에 대한 network-first가 포함되어 캐시된 후 모든 도구에서 완전한 오프라인 기능을 보장합니다. 또한, 저자는 전체 JSON-LD 구조화 데이터와 자동화된 내부 링크 메쉬를 갖춘 정적 도구 페이지를 생성하는 프로그래밍 가능한 SEO 엔진을 개발했으며, 이 모든 것은 빌드 시점에 정적 HTML에 포함됩니다. 이 사이트는 또한 광고 단위가 로드되기 전에 명시적인 고정 높이 레이아웃 슬롯을 예약하여 레이아웃 이동을 방지하는 제로-CLS 광고 전략을 특징으로 합니다. 저자는 사용자가 ToolHub 사이트를 체험해 볼 수 있도록 했으며, 사이트 구축에 포함된 기술적 결정 및 트레이드오프에 대한 자세한 내용을 공유하는 블로그에 전체 엔지니어링 심층 분석을 게시했습니다. 저자는 사용자로부터 피드백과 제안을 구하고 있으며, 아키텍처에 대한 의견과 새로운 도구에 대한 아이디어를 듣는 데 열려 있습니다. 전반적으로 ToolHub 프로젝트는 빠르고, 오프라인 기능이 가능하며, 개인 정보 보호를 우선시하는 웹 애플리케이션을 구축하기 위한 다양한 혁신적인 기술적 접근 방식을 보여줍니다.