Hydration Error, 정확히 알아보자

시작

블로그를 개발하던 과정에 발생한 에러입니다.

텍스트 컨텐츠가 서버 렌더링 HTML과 일치하지 않습니다.

이러한 에러는 Next.js에서 빈번히 발생할 수 있습니다. 왜 발생하고, 어떻게 해결해야 할까요?
Next.js의 작동방식을 이해하면 이러한 에러를 방지할 수 있습니다.

Next.js의 동작과정

일반적으로 React로 만든 애플리케이션의 경우 body는 텅비어있는 html을 다운받습니다.
이후 CSR(Client-Side Rendering)을 통해 UI를 그리게 됩니다.

반면, Next.js는 모든 페이지를 미리 렌더링Pre-rendering 합니다.
생성된 HTML은 해당 페이지에 필요한만큼의 자바스크립트 코드와 연결되고, 브라우저가 페이지를 로드하면
자바스크립트 코드가 전달됩니다.

이 과정을 Hydration이라고 부릅니다.

Hydration은 직역하면 수화(水化)시키다라는 의미입니다. 명칭으로는 이해하기가 힘든데요.

사전 렌더링 과정에서 건조한 html만 제공하고 javascript로 물을 주어 촉촉하게 만듭니다.
이러한 과정을 hydration이라고 부릅니다.

Hydration mismatch

이러한 hydration 과정중에서 서버에서 가져온 HTML 데이터와 클라이언트 HTML데이터가 다를경우가 존재합니다. 대표적으로 시간과 관련된 내용이 그렇습니다.

Clock.tsx

tsx

'use client';
 
import { useEffect, useMemo, useState } from 'react';
 
const formatTime = (date: Date) => {
    //? 월 일 시 분 데이터
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hour = String(date.getHours()).padStart(2, '0');
    const minute = String(date.getMinutes()).padStart(2, '0');
    //? 요일 데이터
    const weeks = ['일', '월', '화', '수', '목', '금', '토'];
    const week = weeks[date.getDay()];
    //? AM/PM 데이터
    const ampm = Number(hour) >= 12 ? '오후' : '오전';
 
    return `${month}월 ${day}일 (${week}) ${ampm} ${hour}:${minute}`;
};
 
const Clock = () => {
    const initialTime = new Date();
    const [time, setTime] = useState<Date>(initialTime);
 
    useEffect(() => {
        const timeInterval = setInterval(() => {
            setTime(new Date());
        }, 1000);
 
        return () => clearInterval(timeInterval);
    }, []);
 
    const timeData = useMemo(() => formatTime(time), [time]);
 
    return (
        <div>
            <div>{timeData}</div>
        </div>
    );
};
 
export default Clock;

위 데이터는 배포시에 hydration Error가 발생하는 코드입니다.
실제 pre-rendering된 html요소에 존재하는 time값과
useEffect로 호출된 time값이 달라서 에러가 발생합니다.

시간 값을 초기에 저장하는게 아니라 렌더링 이후 초기화 되게 작성해야 합니다.

pre-rendering를 항상 고려해서 코드를 작성해야 합니다.

Clock.tsx

tsx

const formatTime = (date: Date) => {
    const formattedDate = dayjs(date).format('MM월 DD일 (ddd) A hh:mm');
 
    return formattedDate;
};
 
const Clock = () => {
    const [time, setTime] = useState<string>('');
 
    useEffectOnce(() => {
        const timeInterval = setInterval(() => {
            const newTime = formatTime(new Date());
            if (newTime !== time) {
                setTime(newTime);
            }
        }, 1000);
 
        return () => {
            clearInterval(timeInterval);
        };
    });
 
    return (
        <div>
            <div>{time === '' && <Loading type={LOADING_ENUM.SMALL} />}</div>
            <div>{time && time}</div>
        </div>
    );
};
 
export default Clock;

저는 위와같이 코드를 변경해서 수정했습니다.
dayjs를 도입해서 코드를 간결화하고 초기값을 비워두어 hydration Error를 처리합니다.

도움이 된 자료 medium

댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.

댓글을 불러오는 중...