Next.js App Router, 프로덕션에서만 가끔 Hydration mismatch가 납니다

Question

App Router를 쓰는데 프로덕션에서만 가끔 콘솔에 hydration mismatch가 뜨고 특정 영역이 깜빡입니다. 새로고침하면 정상이라 재현이 어렵습니다.

Hydration failed because the server rendered HTML didn't match the client.

의심되는 건 상단에 "방금 전", "3분 전" 같은 상대 시간을 표시하는 컴포넌트입니다. 개발에선 안 나는데 프로덕션에서만 간헐적입니다.

환경: Next.js 16 App Router, ISR(revalidate 60)

김영삼 · Accepted Answer

두 가지가 겹친 케이스로 보입니다. 1) 상대 시간 = 서버/클라 시점 불일치 서버가 HTML 만들 때의 "3분 전"과, 브라우저가 hydrate할 때의 "3분 전"이 다를 수 있습니다. 게다가 ISR이면 캐시된 HTML이라 서버 렌더 시각이 한참 과거입니다. 상대 시간은 마운트 후 클라이언트에서 계산하세요. const [rel, setRel] = useState(null) // 서버=null useEffect(() => setRel(formatRelative(date)), [date]) return {rel ?? formatAbsolute(date)} 2) "프로덕션·간헐"의 진짜 이유 — ISR 캐시 HTML은 빌드/리밸리데이트 시점에 고정되는데, 그 안에 시간·난수·Date 의존 값이 있으면 캐시본과 현재 클라이언트가 어긋납니다. 개발은 매 요청 새로 그려서 차이가 안 보이는 것뿐입니

react_지훈 · Answer

상대 시간을 useEffect로 옮기니 깜빡임이 사라졌습니다. 그런데 하나 더 — 다국어(Intl.DateTimeFormat)로 날짜를 찍는 다른 컴포넌트도 가끔 mismatch가 나는데 같은 원인일까요?

김영삼 · Answer

네, 같은 계열입니다. Intl.DateTimeFormat은 런타임 환경의 타임존·로캘을 따릅니다. 서버(UTC)와 브라우저(KST)가 다르면 날짜 문자열이 달라져 mismatch가 납니다. 해결: 포맷에 타임존을 명시해 서버·클라 결과를 고정하세요. new Intl.DateTimeFormat('ko-KR', { timeZone: 'Asia/Seoul', dateStyle: 'medium' }).format(date) 이러면 어디서 렌더하든 같은 문자열이 나와 캐시본과도 일치합니다.

react_지훈 · Answer

timeZone 명시하니 완전히 잡혔습니다. ISR 캐시 때문에 프로덕션에서만 보였다는 설명이 딱 들어맞네요. 감사합니다!

댓글 0