SSR 'window is undefined' 에러 해결법

window is undefined error

 

three.js canvas 사이즈를 조절하는 중 window is undefined 라는 에러가 발생했다

 

CSR과는 다르게 클라이언트에서 렌더링을 할때까지 기다리지 못하기에 생기는 에러인 것 같다

 

해결법은 다음과 같다

 

window 타입 설정 에러 바인딩

if(typeof window !== 'undefined') {
	// 코드
}

 

useEffect

useEffect(() => {
	const 변수 = window.innerWidth;
}, []);

 

dynamic

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../component/적용하실컴포넌트'), {
	ssr: false,
})

const 부모컴포넌트 = () => {
    return (
        <>
            <DynamicComponent />
        </>
    )
};