피드로 돌아가기
How to Add Comments to a Hugo Site (Without a Backend)
Dev.toDev.to
Frontend

15KB 미만 경량 위젯을 통한 Hugo 정적 사이트 State 관리 해결

How to Add Comments to a Hugo Site (Without a Backend)

Yoni Ryabinski2026년 4월 10일1분beginner

AI 요약

Context

Static Site Generator인 Hugo의 특성상 서버 사이드 상태 저장이 불가능한 구조적 한계 존재. 댓글 기능과 같은 Stateful한 데이터 처리를 위해 별도의 Backend 인프라 구축 비용과 관리 리소스가 발생하는 문제 상황.

Technical Solution

  • Client-side Rendering 기반의 Third-party Widget 도입을 통한 서버리스 아키텍처 구현
  • Page URL을 고유 식별자로 활용하여 별도 설정 없는 Thread 분리 및 데이터 매핑 수행
  • Browser-level Hydration 과정에서 발생하는 Layout Shift 방지를 위해 CSS min-height 사전 정의
  • Hugo의 params 및 Environment Variable 매핑 기능을 활용한 API Key 보안 및 설정 자동화
  • Shortcode 추상화를 통한 Markdown 내 임베딩 지점의 유연한 제어 구조 설계

실천 포인트

1. 정적 사이트에 외부 위젯 도입 시 Layout Shift 방지를 위한 최소 높이 값 설정 여부 확인

2. API Key와 같은 민감 정보의 Hugo params 및 환경 변수 처리 체계 구축

3. 위젯의 번들 사이즈가 전체 LCP(Largest Contentful Paint)에 미치는 영향 분석

태그

#Static Site Generator#Client-side Rendering#Hugo#State Management#Hydration
원문 읽기