Next.js 14 Hydration UI match error가 해결이 되질 않습니다...

Question

기능 자체는 잘 동작하나, 브라우저에 자꾸 두 가지 에러가 표시됩니다. Unhandled Runtime ErrorError: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error Unhandled Runtime ErrorError: There was an error while hydrating this Suspense boundary. Switched to client rendering. 에러에 관하여 많이 찾아도 보고 코드 수정도 많이 해봤습니다.가장 초반의 코드 :const [width, setWidth] = useState(Number(localStorage.getItem('sidebarWidth')) || DEFAULT_WIDTH); client component라고 하여 client component에서만 계산이 이뤄지는 것이 아니라, next.js가 판단 후 SSR, CSR 나눠서 계산을 진행한다고 들었습니다. localstorage 데이터를 불러와 useState를 담아주는 코드가 있는데, 이게 브라우저에서 작동은 잘 하나 서버 콘솔에 이런 문구가 떠서 이걸 해결하고자 typeof Window !== "undefined"를 추가해줬습니다.그렇게 수정한 코드가 이것입니다. const [width, setWidth] = useState( typeof Window !== 'undefined' && localStorage.getItem('sidebarWidth') ? Number(localStorage.getItem('sidebarWidth')) : typeof Window !== 'undefined' && !localStorage.getItem('sidebarWidth') ? DEFAULT_WIDTH : 0 ); 그런데 이렇게 코드를 수정하고 나니 그때부터 위의 에러가 브라우저에서 뜨기 시작했습니다.아무래도 next.js가 SSR이 계산해야 한다고 판단하는 부분에서 Window가 사용되어서 이런 에러가 뜬 것 같다는 생각이 들었습니다.그래서 코드를 여러 번 수정을 해보았습니다 1. useEffect 안으로 Window를 집어넣어도 보고const [width, setWidth] = useState(DEFAULT_WIDTH); useEffect(() => {if (typeof Window !== 'undefined') {setWidth(Number(localStorage.getItem('sidebarWidth')) || DEFAULT_WIDTH);} else {setWidth(0);}setIsInit(true);}, []);Next.js의 dynamic import도 이용해보았습니다. 서버 측 렌더링을 비활성화 하려면 ssr 옵션을 사용하여 클라이언트 측에서 컴포넌트를 동적으로 로드할 수 있습니다. 이는 window와 같은 브라우저 API에 의존하는 외부 종속성이나 컴포넌트의 경우 유용하다고 합니다... import dynamic from 'next/dynamic';export default function Sidebar() {const NoSSR = dynamic(() => import('../components/NoSSR'), { ssr: false });return (<>{isClient && (

)})}[NoSSR]'use client';import { MIN_MENU_TITLE_WIDTH } from '../layout-constants';import SidebarMenu from './SidebarMenu';import MyLibrary from './MyLibrary';import Loading from '../loading';import { AppPage } from '../types';import { Suspense, useEffect, useRef, useState } from 'react';export default function NoSSR() {const MIN_WIDTH = 72;const MAX_WIDTH = 1480;const DEFAULT_WIDTH = 72;const [isInit, setIsInit] = useState(false);const [width, setWidth] = useState(DEFAULT_WIDTH);const isHiddenMenuTitle = MIN_MENU_TITLE_WIDTH > width;const isResized = useRef(false);useEffect(() => {if (typeof Window !== 'undefined') {setWidth(Number(localStorage.getItem('sidebarWidth')) || DEFAULT_WIDTH);} else {setWidth(0);}setIsInit(true);}, []);useEffect(() => {if (!isInit) return;localStorage.setItem('sidebarWidth', String(width));}, [isInit, width]);useEffect(() => {window.addEventListener('mousemove', (e) => {if (!isResized.current) {return;}setWidth((previousWidth) => {const newWidth = previousWidth + e.movementX / 2;const isWidthInRange = newWidth >= MIN_WIDTH && newWidth <= MAX_WIDTH;return isWidthInRange ? newWidth : previousWidth;});});window.addEventListener('mouseup', () => {isResized.current = false;});}, []);return (<>

}>{/ Handle /} {isResized.current = true;}}/>);} 이게 현재 코드인데 여전히 가장 상단의 에러 두 개가 계속 뜹니다..ㅠ.ㅠㅠㅠㅠㅠㅠㅠNext.js 공부를 시작한지 얼마 안 되어서 제가 무언갈 간과한 것인지 답답하기만 하네요... 이걸 어떻게 해결해야 할까요?

kenu,전독시 · Answer

next.js 쓰는 직장은 희박한데 일단 응원합니다.https://www.google.com/search?q&#61;Error%3A&#43;Hydration&#43;failed&#43;because&#43;the&#43;initial&#43;UI&#43;does&#43;not&#43;match&#43;what&#43;was&#43;rendered&#43;on&#43;the&#43;server.&#43;See&#43;more&#43;info&#43;here%3A

컴포지트 · Answer

하이드레이션 오류는 초기 상태 기준으로 구조가 서버에서 렌더링한 내용과 브라우저에서 초기화한 내용이 일치하냐로 판단합니다. 본문에 next.js 링크에서 친절하게 원인 파악을 위한 도움을 제공하고 있네요.지금 본문 보니 useState 값에다가 초기값에다 바로 window와 localStorage 같은 브라우저용 객체 썼죠? 안됩니다.컴포넌트 본문에 브라우저용 객체 쓸 일 없도록 로직을 분리하시길. 브라우저 API를 통해 초기값을 주고싶다면, useEffect 따로 만들어서 주시길.예)export function MyClientComponent() { const [width, setWidth] = useState(0) // 초기화 로직은 여기에 useEffect(() => { setWidth(localStorage.getItem('width') || 0) }, []) // 기타 나머지 로직 }

Next.js 14 Hydration UI match error가 해결이 되질 않습니다...

2개의 답변

#front-end 목록