TIL - rendered HTML error

에러 메시지

suspense boundary를 넘었으니 전체 root를 client rendering으로 바꾸라는 에러 메시지가 등장하였다.

해당 에러 메시지가 발생한 코드는 다음과 같다.

'use client'
import Image from 'next/image';
import { useMediaQuery } from 'react-responsive';

const ServiceBackgroundImg = () => {
	const isDesktop = useMediaQuery({
		query: '(min-width: 640px)',
	});
	return isDesktop ? <ServiceDesktopBack/> : <ServiceMobileBack/>;
}

에러 원인

애플리케이션을 렌더링하는 동안, 브라우저에서 처음 렌더링 된 리액트 트리와 미리 서버에서 렌더링 된 트리의 값이 일치하지 않는 경우 이 에러가 발생한다. 이 오류가 발생할 수 있는 원인은 총 3가지다

1. HTML태그를 잘 못 설정한 경우
2. typeof window !== 'undefined'와 같은 렌더링 로직을 넣은 경우
3. window나 로컬스토리지와 같은 브라우저에서만 작동하는 api를 넣은 경우

이 중, 나의 경우는 2번에 해당했다. 이럴 경우 useEffect 훅을 사용하여 의도적으로 CSR 컴포넌트로 바꾸는 것이 유효하다고 한다. 나의 경우 다른 방식으로 처리해보았다.

해결

return 값을 변경하는 것이 아니라, return을 통째로 바꾸는 방식을 택했다. 원래 useEffect를 고려해보았으나

	useEffect(()=>{
      isDesktop
    },[isDesktop]
   )

으로 우스꽝스러워보이는 코드덩어리가 등장하기에 useEffect는 사용하지 않았다. 고친 코드의 생김새는 다음과 같다.

'use client'
import Image from 'next/image';
import { useMediaQuery } from 'react-responsive';

const ServiceBackgroundImg = () => {
	const isDesktop = useMediaQuery({
		query: '(min-width: 640px)',
	});
    if(isDesktop){
      return <ServiceDesktopBack/>
    }
    else {
      <ServiceMobileBack/>
    }
}

링크

https://nextjs.org/docs/messages/react-hydration-error