[Next.js] Hydration Mismatch 에러

1. 문제 상황

페이지 렌더링 시 브라우저 콘솔에 다음과 같은 붉은 에러 메시지가 출력되었습니다.

Uncaught Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

 

에러 로그를 자세히 살펴보니 서버와 클라이언트의 렌더링 결과가 단 1초 차이로 달랐습니다.

* Server: 2026-02-19 15:11:23

* Client: 2026-02-19 15:11:24

 

2. 원인 분석

문제는 컴포넌트 본문에 선언된 new Date() 코드였습니다.

const now = new Date();

 

Next.js의 SSR 과정은 다음과 같이 작동합니다.

1. 서버에서 HTML을 생성할 때 new Date()가 실행됨 (예: 23초)

2. 생성된 HTML이 브라우저로 전달됨

3. 브라우저에서 리액트가 실행(Hydration)되며 다시 new Date()를 호출함 (예: 24초)

4. 서버의 결과물과 클라이언트의 결과물이 일치하지 않으므로 리액트는 "데이터가 다르다!"며 에러를 던짐

 

3. 해결 방법

서버와 클라이언트의 초기 렌더링 상태를 동일하게 맞춘 뒤, 브라우저에 마운트된 직후에만 시간을 업데이트하도록 수정해야 합니다.

useState와 useEffect 조합을 사용합니다.

 

import { useEffect, useState } from 'react';

// ... 내부 코드
const [now, setNow] = useState<Date | null>(null);

useEffect(() => {
  setNow(new Date());
, []};

// ... 렌더링 부분
{ now ? parseDateTime(now) : '-' }

 

4. 요약

* 문제: 서버와 클라이언트에서 각각 new Date()를 호출하여 초 단위 mismatch 발생

* 해결: 초기 상태를 일치시키고, useEffect를 통해 클라이언트 사이드에서만 시간 데이터를 주입.

* 결과: Hydration 에러가 사라지고 정상적으로 렌더링 됨