피드로 돌아가기
Dev.toFrontend
원문 읽기
FOUC 방지를 위한 최적의 Next.js Theme Script 주입 설계
How we engineered a better Next.js theme library
AI 요약
Context
React의 Hydration 전 Cookie 및 LocalStorage의 테마 값을 적용하여 Flash of Unstyled Content(FOUC)를 방지해야 하는 제약 존재. 기존 next-themes는 React 19 환경에서 inline script 처리 방식의 변경으로 인해 CSP 경고 및 하이드레이션 이슈가 발생하는 한계 노출.
Technical Solution
- useServerInsertedHTML 활용으로 script를 SSR 스트림에 포함시켜 React 하이드레이션 전 실행 보장
- Root Layout의 내 직접 주입을 위한 getThemeScript() 헬퍼 함수 제공으로 렌더링 시점 최적화
- noScript 프롭을 통한 Provider의 중복 주입 방지로 불필요한 스크립트 실행 제거
- JSON.stringify 기반의 단순 이스케이핑을 넘어 <, >, & 문자를 명시적으로 처리하여 XSS 취약점 원천 차단
- 상태 관리 로직을 Provider에서 분리하여 332라인의 God Component를 60라인 규모의 Store 구조로 재설계
실천 포인트
1. React 19 환경에서 inline script 주입 시 useServerInsertedHTML 사용 여부 검토
2. 사용자 설정값이 포함된 script 태그 생성 시 HTML 특수문자 이스케이핑 처리 확인
3. FOUC 방지를 위해 script 주입 위치를 <body> 내부가 아닌 <head> 최상단으로 배치
4. Provider 컴포넌트의 비대화를 막기 위해 비즈니스 로직을 별도 Store로 분리