React 수동 수동 Hydration 오류 해결: 인라인 스크립트 기법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 서버 렌더링(SSR) 개발자 (중급~고급)
핵심 요약
- React Hydration Mismatch 문제 해결 방법: 인라인 스크립트로 클라이언트 전용 콘텐츠 동적으로 수정
- 기본 원리: 서버 렌더링 후, React Hydration 이전에 DOM 조작
- 핵심 코드:
use client
+document.getElementById()
활용한 실시간 DOM 수정
섹션별 세부 요약
1. Hydration Mismatch 문제 정의
- React SSR에서 서버/클라이언트 콘텐츠 불일치 시 발생
- 예:
window
객체 존재 여부에 따라 "Bye World" vs "Hello World" 렌더링 - 오류 메시지:
Warning: Text content did not match
발생
2. 전통적 해결책의 한계
useEffect
사용 시 렌더링 플리커(flicker) 발생- SSR과 CSR 간 콘텐츠 동기화 실패
3. 인라인 스크립트 기법 구현
use client
지시어로 클라이언트 전용 컴포넌트 생성- HTML 렌더링 직후 실행되는 인라인 스크립트:
```javascript
const inlineScriptFn = () => {
const helloElement = document.getElementById('hello');
if (helloElement) helloElement.textContent = 'Hello World';
}
```
- 서버 렌더링 시 "Bye World", 클라이언트 렌더링 시 "Hello World" 동적 조정
4. 동작 원리
- 서버 렌더링:
isBrowser()
false → "Bye World" 렌더링 - 클라이언트: 인라인 스크립트 실행 → "Hello World" DOM 적용
- React Hydration 시 서버/클라이언트 콘텐츠 일치 → 오류 방지
5. 기술적 이점
- Zero Flicker SSR: 사용자 인식 불가능한 콘텐츠 동기화
- React Hydration 과정 단절: 스크립트 실행 시점이 React 이전
- 실무 적용 사례: Builder.io SDK에서 Variant Container 구현
결론
- React Hydration Mismatch 해결 팁:
use client
+ 인라인 스크립트로 DOM 수정 - 핵심 원칙: 서버 렌더링 후, React Hydration 이전에 DOM 조작
- 추천 구현:
document.getElementById()
활용한 실시간 콘텐츠 동기화 - 실무 적용 예시: Builder.io의
inlined-fns.ts
에서 실제 적용 중