Runtime JSON 로딩 제거 및 Tree Shaking 도입을 통한 i18n 최적화

react-i18next Was Fine. Then I Found Paraglide.

Nathan2026년 5월 4일7분intermediate

AI 요약

Context

기존 react-i18next 기반 구조의 String 기반 Key 참조로 인한 Type Safety 부재와 런타임 오류 위험 존재. 전체 Translation JSON 파일을 클라이언트에 전송하는 구조로 인해 번들 크기 증가 및 데이터 유출 가능성이 상존하는 아키텍처적 한계 직면.

Technical Solution

Translation 메시지를 단순 JSON 데이터가 아닌 개별 Import 가능한 TypeScript 함수로 생성하는 컴파일 타임 코드 생성 방식 채택
Hook 기반의 Context 의존성을 제거하여 Component 외부의 Utility 함수나 Server Component에서도 직접 호출 가능한 Direct Import 구조 설계
정적 분석 기반의 Tree Shaking을 적용하여 실제 사용되는 메시지만 번들에 포함시키는 최적화 메커니즘 구현
컴파일 타임에 메시지 파라미터 타입을 정의하여 런타임 Key 미스매치 오류를 원천 차단하는 Type Safety 확보
수백 바이트 수준의 Ultralight Runtime 설계로 SSR 환경에서의 Hydration 오버헤드 최소화

실천 포인트

- i18n 라이브러리 선택 시 단순 기능 구현을 넘어 Tree Shaking 지원 여부 확인 - Component 외 영역(Utility, API Logic)의 다국어 처리 필요성 검토 후 Hook 의존성 없는 구조 고려 - Runtime Key 참조 방식에서 Compile-time Type-safe 함수 참조 방식으로의 전환 검토 - 대규모 다국어 파일의 경우 전체 로딩 방식이 아닌 필요한 메시지만 로드하는 전략 수립

태그

#Tree-shaking #Code Generation #Type Safety #SSR #i18n

원문 읽기